Reactive Forms in Angular

Hello Everyone :) Gain a quick understanding about implementing Reactive Forms approach in Angular.

Reactive forms provide a model-driven approach to handling form inputs whose values change over time.

Reactive forms are defined programmatically at the level of the component class. Reactive Forms are a better default choice for new applications, as they are more powerful and easier to use.

Advantage of Reactive Forms:

For more extensive forms, having many directives in the template for specifying business validation rules can quickly become complex. Thus, implementing that logic on the component class instead is much clearer.

How to use Reactive Forms:

1. Import ReactiveFormsModule from ‘@angular/forms’
2. Create Form Model in component class using FormGroup, FormControl & FormArray.
3. Create the HTML Form resembling the Form Model.
4. Bind the HTML Form to the Form Model.

In the Reactive Forms approach, It is our responsibility to build the Model using FormGroup, FormControl and FormArray.

FormControl encapsulates the state of a single form element in our form. It stores the value and state of the form element and helps us to interact with them using properties & methods.

FormGroup represents a collection of form controls. It can also contain other FormGroups and FormArrays. In fact, an angular form is a FormGroup.

Let’s create a Form Model:

HTML File

<form [formGroup]=”sampleForm” (submit)=”onFormSubmit()”>

<div class=”form-group”>

<label for=”username”>Username</label>

<input type=”text” id=”username” class=”form-control” formControlName=”username” />

</div>

<div class=”form-group”>

<label for=”email”>Email</label>

<input type=”text” id=”email” class=”form-control” formControlName=”email” />

</div>

<button class=”btn btn-primary” type=”submit”>Submit</button>

</form>

Ts File

import { Component, OnInit } from ‘@angular/core’;

import { FormControl, FormGroup, Validators } from ‘@angular/forms’;

@Component({

templateUrl: ‘./add.component.html’,

})

export class AppComponent implements OnInit {

sampleForm: FormGroup;

constructor() {}

ngOnInit(): void {

this.sampleForm = new FormGroup({

‘username’: new FormControl(null, Validators.required),

‘email’: new FormControl(null, [Validators.required, Validators.email])

});

}

onFormSubmit(){

console.log(this.sampleForm);

}

This is an example form that is created programmatically. Once the form model is created one can sync it to the HTML template using the pre-built directives such as [formGroup], formControlName, formGroupName, formArrayName.

The forms can be validated using the Validators objects provided by ‘@angular/forms’. For example, Validators.required, Validators.email, etc

FormControls can also be nested as follows,

this.sampleForm = new FormGroup({

‘userData’: new FormGroup({

‘username’: new FormControl(null, Validators.required),

‘email’: new FormControl(null, [Validators.required, Validators.email]),

}),

‘gender’: new FormControl(‘male’)

});

So here username and email is nested inside userData which is an another FormGroup. Likewise the template for this can be nested using the formArrayName directive as follows.

<div formArrayName=”userData”>

<div class=”form-group”>

<label for=”username”>UserName</label>

<input type=”text” id=”username” class=”form-control” formControlName=”userData.username” />

</div>

<div class=”form-group”>

<label for=”email”>Email</label>

<input type=”text” id=”email” class=”form-control” formControlName=”userData.email” />

</div>

</div>