Intro To Angular Reactive Forms

Angular offers two main approaches to handling user input through forms: reactive and template-driven. Both approaches build on top of a common Forms API.

In this post, I will build a form following the reactive approach, also known as model-driven forms.

I wrote an Intro To Angular Template-driven Forms, where I built the same form using the template-driven approach.

I found it useful to build the same form using the two approaches to appreciate the differences better.

In this post, I will skip the theory, but if you want to read more, have a look at the free article on Medium.

Starting Point: Creating One Element

First of all, we need to remember to import ReactiveFormsModule because it “exports the required infrastructure and directives for reactive forms.”

Therefore, we import the ReactiveFormsModule in app.module.ts.

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

and declare it in the imports in @NgModule.

imports: [BrowserModule, ReactiveFormsModule],

Step 1: First Element In The Template

A generic form element in Angular forms may look like the following:

<div>
  <label for="email">Email</label>
  <input type="email" id="email" [formControl]="email" />
</div>

This is plain HTML, except for [formControl]=”email".

The formControl binding comes from the FormControlDirective, which comes from the ReactiveFormsModule that we imported above.

Step 2: Create The Control In The Class

After importing FormControl, we can assign a new FormControl instance to email. FormControl “Tracks the value and validation status of an individual form control,” angular.io.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
...
export class ReactiveFormComponent {
  email = new FormControl('');
}

In this case, by using new FormControl('') we set the initial value of emailto an empty string.

Thanks to FormControl, we can listen for, update, and validate the state of the form element.

This is it! You just created your first element!

From One Element To A Form

Starting from the generic element above, we can create the following form:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
...
reactiveForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    age: new FormControl(''),
});

Note that we must import FormGroup from @angular/forms in every component where we want to create a new FormGroup instance.

We created a FormGroup instance in the class. FormGroup “Tracks the value and validity state of a group of FormControl instances,” angular.io.

We then need to associate the FormGroup model and view the template using property binding.

As for template-driven forms, we want to have a way to work with the form as a whole rather than dealing with each element.

.

First difference

We can see the first difference with template-driven forms in the formtag. We are not using a reference variable anymore.

Second difference

A second difference consists of formControlName.

“The formControlName input provided by the FormControlName directive binds each individual input to the form control defined in FormGroup,” angular.io.

However, the form group instance provides the source of truth for the model value.

Third difference

A third difference is that we don’t need to use the name attribute in the input tags.

Quick Summary

Angular offers two main approaches to building forms: reactive and template-driven. In this post, we explored the reactive approach.

Both approaches build on top of a common Forms API.

1. Import ReactiveFormsModule in app.module.ts
2. Use new FormControl() to instantiate a form control
3. Use new FormGroup() to create a group of form controls
4. Bind the FormGroup model in the class with the view through property binding [FormGroup]="myFormGroupName"
5. The tag implement NgForm by default after importing ReactiveFormsModule

Feel free to take a look at the code on GitHub, or read the original article on Medium (free).