Angular Reactive Forms

Angular reactive forms follow a model-driven approach to handle form input whose values can be changed over time. These are also known as model-driven forms. In reactive forms, you can create and update a simple form control, use multiple controls in a group, validate form values, and implement more advanced forms.

Reactive forms use an explicit and immutable approach to manage the state of the form at a given point of time. When we change the form state, it returns a new state which manages the integrity of the models between changes. In reactive forms, you build your own representation of a form in the component class.

Reactive forms are easy to test because they assure consistent and predictable data when requested.

How to add a single form control

In this section, we will describe how to add a single form control. Here, the users have to enter their name into an input field, form captures that input value, and displays the current value of the form control element.

Follow these steps:

1. Register the reactive forms module

You have to import ReactiveFormsModule from the @angular/forms package and add it to your NgModule's imports array to use reactive forms.

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
    // other imports ...
ReactiveFormsModule
  ],
})
export class AppModule { }

2. Generate and Import a new form control

First, generate a component for the control by using the following syntax:

ng generate component NameEditor

To register a single form control, you have to import the FormControl class into your component and create a new instance of the form control to save as a class property. The FormControl class is the basic building block used in reactive forms.

Write the following code in name-editor.component.ts file:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

3. Now, register the control in the template

After creating the control in the component class, you have to add it to the form control element in the template. Use the formControl binding provided by FormControlDirective to update the template with the form control.

<label>
  Name:
  <input type="text" [formControl]="name">
</label>

We have registered the form control to the name input element in the template. Now, the form control and DOM element communicate with each other and the view reflects changes in the model, and the model reflects changes in the view.

4. Display the component

Add the form control component to the template to display the form. Add the following code to app.component.html.

<app-name-editor></app-name-editor>

Output: