Reactive Forms In Angular

|
| By Webner

Introduction to Reactive forms

In Reactive Forms, we use Modal driven approach to handle form inputs which changes over time. Reactive forms are most preferred to use. It is flexible to use and provides many benefits.

For example, By using Reactive forms user can easily add form input elements dynamically and also put validation at run time based on the decisions made in code. It is easier to test as most of the logic and validation is in the component class.

By using the Reactive Form, we can create the entire form control tree in the component class code.

Now we try to understand this by creating a simple form. In this example, we use just 2 controls as shown below

Figure:1
reactive forms

Creating a form group model:

We use two classes to create a form Control tree. These are FormGroup and FormControl.

For creating a form with multiple groups of controls, we need to create an instance of FormGroup class and also each input element. Similarly for FormControl, we need to create an instance of FormControl class.
So we create CreateEmployeeComponent (create-employee.component.ts) class as shown below.

import { Component, OnInit } from '@angular/core';
// Import FormGroup and FormControl classes
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css'] })
export class CreateEmployeeComponent implements OnInit {
// This FormGroup contains fullName and Email as form controls
employeeForm: FormGroup;
constructor() { }
// Initialise the FormGroup with the 2 FormControls.
// created when the component is initialised
ngOnInit() {
this.employeeForm = new FormGroup({
fullName: new FormControl(),
email: new FormControl()
});
}
}

Binding the FormGroup model and the view:

Now we will bind the view template to the form group model that we created in the component class. For this, we use two directives provided by the Angular ReactiveFroms module.

  • formGroup
  • formControlName

Here is the modified HTML. Notice the use of formGroup and formControlName directives in the <form> element and the 2 input elements.

<form class="form-horizontal" [formGroup]="employeeForm">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Create Employee</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label" for="fullName">Full Name</label>
<div class="col-sm-8">
<input id="fullName" type="text" class="form-control" formControlName="fullName">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-8">
<input id="email" type="text" class="form-control" formControlName="email">
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</div>
</form>

Please note :
To bind the <form> element to the employeeForm group in the component class we use the formGroup directive. Since “employeeForm” is a property that we use square brackets around the formGroup directive. This is used for property binding.

To bind each element with the associated FormControl in the FormGroup model, we use formControlName directive. Notice that we are not using square brackets with formControlName directive.

Leave a Reply

Your email address will not be published. Required fields are marked *