Search⌘ K
Home/
Courses/
Build Reactive Websites with RxJS: Master Observables and Wrangle

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.

We'll cover the following...

registration-form.component.html form

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

HTML
<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:

TypeScript 3.3.4
  get addresses() {
    return this.registrationForm.get('addresses') as FormArray;
  }
  addAddress() {
    this.addresses.push(this.fb.group(addressModel));
  }

This addresses isn’t a regular ...