Angular 10 – Reactive Forms

In this part, we would be covering Angular 10 Reactive Forms. Perviously we discussed Template-Driven Forms. In this tutorial, you will learn how to create a reactive form as well as update form controls.

1. About Reactive Forms
2. Creating Reactive Forms
3. Create the HTML Template
4. Reactive Form Submission
5. Next Steps

1. About Reactive Forms

Reactive forms are also called Model-Driven forms. According the the Angular documentation, reactive forms are based on observable streams. As such, form inputs and values are provided as streams of input values that can be access synchronously.

Reactive forms are more feature-rich than template-driven forms and provide better synchronous access to the data model

2. Creating a Reactive Form

The easiest way to create a reactive form is using the FormBuilder class which is available in the @angular/forms package.

So let’s follow the steps to create a form to edit and update Employee data.

Step 1: Create the Employee component

Step 2: Create the Employee class. This is shown below:

export class Employee {
  constructor(
    public firstName: string,
    public lastName: string,
    public department: string,
    public address: {
      street: string,
      city: string,
      state: string
    }
  ) {
  }
}

Step 3: Inject the FormBuilder service. Do this by injecting a FormBuilder field into the EmployeeComponent’s constructor.

  constructor(
    private fb: FormBuilder
  ) { }

Step 4: You’ll have to import the FormBuilder class

import { FormBuilder } from '@angular/forms';

Step 4: Generate the form controls. You can do this using the methods available in the FormBuilder. These methods are: control(), group() and array(). They are used to generate instances of form controls, form groups and form arrays. Add the code below to the EmployeeComponent.

  employeeForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    department: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      zip: ['']
    }),
  });

This code defines the form controls together with the initial value of each form control. In this case, all are empty strings.

3. Create the HTML Template

We would now create the html template for the reactive form. I have created it with Bootstrap css styles as shown below:

<form [formGroup]="employeeForm">
  <div class="form-group">
    <label >Firstname</label>
    <input class="form-control" formControlName="firstName">
  </div>
  <div class="form-group">
    <label >Lastname</label>
    <input class="form-control" formControlName="lastName">
  </div>
  <div class="form-group">
    <label >Department</label>
    <input class="form-control" formControlName="department">
  </div>
  <div class="form-group" formGroupName="address">
    <label><b>Address</b></label><br>
    City: <input class="form-control" formControlName="street">
    State: <input class="form-control" formControlName="city">
    Zip: <input class="form-control" formControlName="zip">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Note the following:

[formGroup]: this specified the same name of the form used in the FormBuilder

formControlName: this only applies to reactive form. It specifies the particular form field as defined by the FormBuilder

Nested Form Group: the address field is a nested form group. Therefore, it does not have a formControlName but a formGroupName. The child elements of this node are the nested field. Take some time to digest this.

4. Reactive Form Submission

As before, to submit this form, you need to either add a (click) event to the submit button. Conversely, you can add an (ngSubmit) event  to the form.

Let’s use (ngSubmit). The form markup is now:

<form [formGroup]="employeeForm" (ngSubmit)="update()">

Finally, we add  the update() method to the EmployeeComponent. The method is shown below. We simply display the value of the form to the console.

  update() {
    console.log(this.employeeForm.value);
  }

Launch the application, enter some values in the form and click on submit. Open the console window and check the output.

You can see that as before, the value of the form gives us  the current input values

5. Next Steps

If you have come this far, then congrats!.

However, there’s yet much to be done. For instance

• How to we handle form validation
• What about dynamic forms
• What of other controls like select List, options list checkboxes etc
• And more!

We’ll be looking at these in subsequent parts. But we’ll start with form validation. So move on to the next part.