Developing the Best Forms Using Reactive Forms

As learnt in the previous lesson, we now know that when forms are an essential part of our application, we use reactive forms to build more testable, robust, and scalable applications.

This is more like the component way of defining form input fields. Let’s look at the different entities used when dealing with Reactive forms.

Importing the module

To use reactive forms in Angular, we import the ReactiveFormsModule instead of FormsModule.

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

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

Since most of the logic is written in the component class, our template code becomes very simple.

<form [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm)">
  <input formControlName="name" placeholder="Name">
  <input formControlName="email" placeholder="Email">
  <input formControlName="message" placeholder="Message">

<button type="submit">Submit</button>
</form>

FormControl

This class powers individual form control, tracks the value, and validation.

Each ‘input’ in our form will be mapped with FormControl. This FormControl is like our input box, select box, radio buttons, etc.

this.control= new FormControl('Nishu Goel');

FormGroup

This is used when we want to group all the FormControl fields. This also keeps track of the validation for the FormGroup instance and the associated FormControl fields.

Usage:

 this.customerForm= new FormGroup({
    name: new FormControl('Nishu Goel'),
    email: new FormControl('nishugoel@gmail.com')
  });

On the template, it can then be used like this:

<form [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm)">

Now to simplify all this and create controls and groups without having to use the FormControl and FormGroup, we can use the API FormBuilder. This takes care of creating all FormControl instances and form group instance for us.

FormBuilder

ngOnInit() {
  this.person = this.fb.group({
    name: ['', [Validators.required, 
    city: ['', Validators.required],
    street: ['', Validators.required]
    })
  });

Nested FormGroup

We can also use nested form groups for creating an object within an object like structure.

This would be simple like this:

ngOnInit() {
  this.person= this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    address: this.fb.group({
      city: ['', Validators.required],
      country: ['', Validators.required]
    })
  });

We inject it as a dependency in the constructor.

constructor(private fb: FormBuilder)

Demo

In the playground, look for the usage of FormControl, FormGroup in the app.component.ts file. Look at line numbers 40-56.

In the output, you will see that while trying to submit the form, we will get a validation error if the required fields are not satisfied.

Expected output: