How to Create Your First Angular Reactive Form

Read full article on the Infragistics blog

Out of the box, Angular provides us with two types of forms:

Template Driven Forms
Reactive Forms

In Template Driven Forms, you create controls on the component template and bind data using ngModel. With these, you do not create controls, form objects, or write code to work with pushing and pulling of data between component class and template; Angular does all of these tasks for you. In template driven forms, there is very little code for validations in the component class, and they’re asynchronous.

In Reactive Forms, you create form controls as trees of objects in the component class and bind them to the native form controls in the template. All validations and the creation of form controls are written in the component class. In Reactive Forms, all validations and changes in the state of native forms are synchronous, so you can write code in the component class to observe them. You should choose to create reactive forms when the data model is immutable and usually mapped to a database.

The major difference between these two approaches of creating forms? In reactive forms you do not use directives such as ngModel, required, etc. You create all controls and their validations in the component class. Reactive forms are easy to test and maintain, so in this post we will learn to create a basic Reactive Form, using FormControl, FormGroup, FormBuilder class, and adding validations.

Step 1: Add Reactive Forms Module

To start working with reactive forms, first add ReactiveFormsModle in the App Module as shown in the next listing:

	import {ReactiveFormsModule} from '@angular/forms';
	import { AppComponent } from './app.component';

	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule, ReactiveFormsModule
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw

reactiveform1.js

hosted with ❤ by GitHub

Step 2: Import required module in Component

Next, you need to import the required Reactive forms classes such as FormGroup, FormControl, FormArray in the components class. We will use these classes to construct our reactive form. After importing these classes, the component class should look like the listing below:

	import { Component } from '@angular/core';
	import { FormGroup, FormControl, FormArray } from '@angular/forms';
	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {
	title = 'Reactive Forms Demo';
	}

view raw

recativeformangular2.js

hosted with ❤ by GitHub

Your component class can be different from the AppComponent created above depending on your implementation; however, here we have imported FormGroup, FormControl, and FormArray classes. Let’s learn about these classes one by one:

Step 3: Using the FormControl class

The FormControl class corresponds to one individual form control, tracking its value and validity. While creating your reactive form, you will create an object of the FormControl class. The FormControl constructor takes three parameters:

Initial data value, which can be null.
Array of synchronous validators. This is an optional parameter.
Array of asynchronous validators. This is an optional parameter.

In the component class, you can create a FormControl as shown in the listing below:

	export class AppComponent {

	email = new FormControl('');

	}

view raw

reactiveform3.js

hosted with ❤ by GitHub

We are not passing any optional parameters like sync validations or async validations, but we will explore these parameters while adding validation to a FormControl.

On the View, you can use email FormControl as shown below:

	<input [formControl]='email'
	type="text"
	placeholder="Enter Email" />
	{{email.value \| json}}

view raw

reactiveform4.js

hosted with ❤ by GitHub

As you see, we are using property binding to bind the formControl email to the input element on the view.

Read full article on the Infragistics blog

Dhananjay Kumar