...

/

Setting Up the Registration Form Inputs

Setting Up the Registration Form Inputs

Now that we've proven that Angular's aware of when we do the wrong thing, let's fill out the rest of the form inputs.

registration-form.component.html form

First is the section containing all the formControls that aren’t part of a subgroup:

Press + to interact
<form [formGroup]="registrationForm">
<label>Username:
<input formControlName="username">
</label>
<label>Phone Number:
<input formControlName="phoneNumber">
</label>
<label>Password:
<input formControlName="password" type="password">
</label>
<label>Confirm Password:
<input formControlName="confirmPassword" type="password">
</label>
</form>

There is nothing terribly new here, but do not forget those type="password" attributes.

Next up is the address section. First, add a convenience helper to the controller to get the addresses attribute:

Press + to interact
get addresses() {
return this.registrationForm.get('addresses') as FormArray;
}
addAddress() {
this.addresses.push(this.fb.group(addressModel));
}

This addresses isn’t a ...