MEAN Stack Tutorial with Angular 2 - Part 4: Reactive Forms/Form Validation for Registration Page

Source files:

[NarayananSelvaraj]

I've built my form using Angular Material

<form [formGroup] = "form" class="example-form">

<table class="example-full-width" cellspacing="0"><tr>
<td><md-form-field class="example-full-width">
<input mdInput placeholder="First name">
</md-form-field></td>
<td><md-form-field class="example-full-width">
<input mdInput placeholder="Last name">
</md-form-field></td>
</tr></table>

<table class="example-full-width" cellspacing="0"><tr>
<td> <md-form-field class="example-full-width">
<input type="text" placeholder="Gender" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of options" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
</md-form-field></td>
<td>
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Date of birth">
<md-datepicker-toggle mdSuffix
<md-datepicker #picker startView="year"
</md-form-field>
</td>
</tr></table>

<p>
<md-form-field class="example-full-width">
<textarea mdInput
</md-form-field>
</p>

<table class="example-full-width" cellspacing="0"><tr>
<td><md-form-field class="example-full-width">
<input mdInput placeholder="City">
</md-form-field></td>
<td><md-form-field class="example-full-width">
<input mdInput placeholder="State">
</md-form-field></td>
<td><md-form-field class="example-full-width">
<input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="">
<md-hint / 6</md-hint>
</md-form-field></td>

</tr></table>

<table class="example-full-width" cellspacing="0"><tr>
<td>
<md-form-field class="example-full-width">
<input mdInput placeholder="Email"
<md-error
Please enter a valid email address
</md-error>
<md-error
Email is <strong>required</strong>
</md-error>
</md-form-field>
</td>

<td>
<md-radio-group>
<md-radio-button value="1">Option 1</md-radio-button>
<md-radio-button value="2">Option 2</md-radio-button>
</md-radio-group>
</td>

</tr></table>

<button md-raised-button
<button md-raised-button color="warn">Cancel</button>
</form>


1. I can't able to add formControlName nor name to it. The application breaks right away.
2. How to send/retrieve the data to/from the back-end and view it on Robo3T?

[mass]

FYI, the '?' mark used to make sure required is defined on errors is called the "Elives Operator". That's in case ElseIf has left the building :)

[zortinctechnologies]

You are simply superb... Thank you for making it so understanding.

[HwangInsoon]

Thank you so much for your posting.
Have a wonderful day.

[ajcoder]

Hi David, great work :). You could have added form.controls.username.dirty to the ul element which has help-block class instead of all the li element.

[ThestarSTUNNNA]

thanks for the video im going to share this on other youtube sites u desrve it!

[bigcaka]

btw anyone trying to do this rn. u need to both the FormsModule and ReactiveFormsModule for this to work.

[NarayananSelvaraj]

@25:03 What if I needed to create a form which includes Date of Birth? How do we define the model, validators and function for it?

[xSoNiCcRaCkErSx]

I'm having trouble with the validators, when adding more than 2 using the Compose function, it breaks them. It seems I can only have 2 validators at once. Might you know how to solve or overcome this?

Also if I have both an email confirm and a password confirm, what is the best way to have a 'matching' validator (like for the passwords) work on them both?

Thanks!

[manmohangupta]

Hi I got error "RegisterComponent.html:37 ERROR TypeError: Cannot read property 'email' of undefined" plz tell me how to solve this error

[imtheshadow]

Hello Mr Daviad I got this Error in registerpage.html for all fields could you help me please
:[Angular] Identifier 'username' is not defined. '__type' does not contain such a member

[bounteous]

Is it happening to someone? JSON.parse: unexpected character at line 1 column 1 of the JSON data

[pseudocoderkim]

Thank you for your excellent video. Everything's fine except the input doesn't turn red or green. I hope if you can help me with this.

[ryanmoody]

I'm getting this as an error, (16, 3): Type 'FormGroup' is not assignable to type 'FormBuilder'.
Property 'group' is missing in type 'FormGroup'.

Any thoughts?

[sharlsherif]

i don't think u would reply but what atom modules u use to underline wrong code?

[ryanmoody]

And here is the code, except only "this.form" is underlined with red.



@Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: class RegisterComponent implements OnInit {

form: FormBuilder;
createForm(){ this.form = this.formBuilder.group({ email:'', username:'', password:'', confirm:'' })}
constructor( private formBuilder: FormBuilder) { }




ngOnInit() { }
}