Reactive Forms In Angular 11

Introduction

In this article, we will see Reactive Forms of angular. In this article, we will discuss how we can implement reactive forms in angular, how we can get input data, how to set validations and how we can set data in the input field.

In this article,

Create angular project
Create a simple HTML form
Initialize Reactive Form
Get form data
Add validations
Set data in the form

Create Angular project

To create a new angular project run the following command in your command box. Here ReactiveForms is my project name.

Ng new ReactiveForms

Create a simple HTML form

Create a form in your component file. Here I use bootstrap to design my input. I don’t know how to use bootstrap in angular please refer to this article.

In this form I used basic inputs like textbox, dropdown and radio button.

<form class="p-5">
<h1 class="text-success">Reactive Forms Demo</h1>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Name</label>
<input type="text" class="form-control" id="inputname4">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
</div>
<div class="form-group col-6">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group col-6">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>Gujarat</option>
<option>Panjab</option>
<option>Tamilnadu</option>
<option>Delhi</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Married
</label>
</div>
</div>
<button type="button" class="btn btn-primary">Submit</button>
</form>

Initialize Reactive Form

For making the form a reactive form you have to follow the below steps.

Step 1

Import FormsModule and ReactiveFormsModule in your import array of app.module.ts file.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
//import this both module for use reactive form
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 2

Create FormGroup object in your component.ts file.

Step 3

Define FormBuilder object in your constructor.

Step 4

Now initialize the form group with your expected fields as shown in the below code in your ngOnInit method or in your Constructor.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'reactiveforms';
FormDemo: FormGroup;
constructor(
private fb: FormBuilder,
) {
}
ngOnInit() {
this.FormDemo = this.fb.group({
name: [''],
email: [''],
address1: [''],
address2: [''],
city: [''],
state: [],
zip: [''],
mstatus: [],
});
}
}

Step 5

Now initialize form group to your form in component.html file and also add formControllName in input fields and initialize with your field name which you create in .ts file. You can initialize form group to form as shown the below image. While enter the value in the form control name add the same value as you define in your .ts file otherwise it gives an error.

<form class="p-5" [formGroup]="FormDemo">
<h1 class="text-success">Reactive Forms Demo</h1>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Name</label>
<input type="text" formControlName="name" class="form-control" id="inputname4">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" formControlName="email" class="form-control" id="inputEmail4">
</div>
</div>
<div class="form-group col-6">
<label for="inputAddress">Address</label>
<input type="text" formControlName="address1" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group col-6">
<label for="inputAddress2">Address 2</label>
<input type="text" formControlName="address2" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" formControlName="city" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" formControlName="state" class="form-control">
<option selected>Choose...</option>
<option>Gujarat</option>
<option>Panjab</option>
<option>Tamilnadu</option>
<option>Delhi</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" formControlName="zip" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck" formControlName="mstatus">
<label class="form-check-label" for="gridCheck" >
Married
</label>
</div>
</div>
<button type="button" class="btn btn-primary">Submit</button>
</form>

Get form data

You can easily get form data using the reactive form. You can get field value by the following the statement.

this.FormDemo.controls.name.value

Here FormDemo is my FormGroup object and the name is my form field.

For making it simple or not write similar code repeatedly we can create a get method as shown below which return form.controls and after that, we can get field value from it.

In .ts File,

get form() {
return this.FormDemo.controls;
}
submitForm(){
console.log("Name :- "+this.form.name.value)
console.log("Email :- "+this.form.email.value)
console.log("Address1 :- "+this.form.address1.value)
console.log("Address2 :- "+this.form.address2.value)
console.log("City :- "+this.form.city.value)
console.log("State :- "+this.form.state.value)
console.log("Zip :- "+this.form.zip.value)
console.log("Marital status :- "+this.form.mstatus.value)
}

In html file,

<button type="button" (click)="submitForm()" class="btn btn-primary">Submit</button>

Output

Forms Value

Console

Add Validations in Form

In angular, there are different types of validator like required, email, min length, max length, etc.

But here we only user required an email validator to simply understand how validation works in angular.

Step 1

Define validator in your FormGroup initialization as show below.

ngOnInit() {
this.FormDemo = this.fb.group({
name: ['', [Validators.required]],
email: ['', [Validators.required, Validators.email]],
address1: ['' ,[Validators.required]],
address2: ['',[Validators.required]],
city: ['',[Validators.required]],
state: ['',[Validators.required]],
zip: ['',[Validators.required]],
mstatus: [],
});
}

Step 2

Check your form is valid or not in your submit method. You can check your form is valid or invalid by checking FormDemo.invalid.

Here FormDemo is formed group object and invalid is property of form group which returns true of your form is invalid. Return your method from further execution if your form is invalid.

Here also we initialize isSubmitted variable as true which we declare on top of constructor.

submitForm() {
this.isSubmitted = true;
if (this.FormDemo.invalid) {
return
}
console.log("Name :- " + this.form.name.value)
console.log("Email :- " + this.form.email.value)
console.log("Address1 :- " + this.form.address1.value)
console.log("Address2 :- " + this.form.address2.value)
console.log("City :- " + this.form.city.value)
console.log("State :- " + this.form.state.value)
console.log("Zip :- " + this.form.zip.value)
console.log("Marital status :- " + this.form.mstatus.value)
}

Step 3

Set error message as shown in the below image. Here we check the flag with isSubmitted because it does not check with this flag we will see an error message when your page is load and we don’t want that. We only want to show an error message when the user clicks in submit button.

The next thing we check here is form field has an error if the form field does not have any error then it’s time west to execute further.

Next, we create two labels with two different conditions which are if an email has required error then show required error message or email has invalid email error than show invalid email message.

<form class="p-5" [formGroup]="FormDemo">
<h1 class="text-success">Reactive Forms Demo</h1>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Name</label>
<input type="text" formControlName="name" class="form-control" id="inputname4">
<div *ngIf="isSubmitted&&form.name.errors" class="text-danger">
<p *ngIf="form.name.errors.required">Please enter name.</p>
</div>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" formControlName="email" class="form-control" id="inputEmail4">
<div *ngIf="isSubmitted&&form.email.errors" class="text-danger">
<p *ngIf="form.email.errors.required">Please enter email.</p>
<p *ngIf="form.email.errors.email">Please enter valid email.</p>
</div>
</div>
</div>
<div class="form-group col-6">
<label for="inputAddress">Address</label>
<input type="text" formControlName="address1" class="form-control" id="inputAddress" placeholder="1234 Main St">
<div *ngIf="isSubmitted&&form.address1.errors" class="text-danger">
<p *ngIf="form.address1.errors.required">Please enter Address.</p>
</div>
</div>
<div class="form-group col-6">
<label for="inputAddress2">Address 2</label>
<input type="text" formControlName="address2" class="form-control" id="inputAddress2"
placeholder="Apartment, studio, or floor">
<div *ngIf="isSubmitted&&form.address2.errors" class="text-danger">
<p *ngIf="form.address2.errors.required">Please enter Address2.</p>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" formControlName="city" class="form-control" id="inputCity">
<div *ngIf="isSubmitted&&form.city.errors" class="text-danger">
<p *ngIf="form.city.errors.required">Please enter city.</p>
</div>
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" formControlName="state" class="form-control">
<option selected>Choose...</option>
<option>Gujarat</option>
<option>Panjab</option>
<option>Tamilnadu</option>
<option>Delhi</option>
</select>
<div *ngIf="isSubmitted&&form.state.errors" class="text-danger">
<p *ngIf="form.state.errors.required">Please enter state.</p>
</div>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" formControlName="zip" class="form-control" id="inputZip">
<div *ngIf="isSubmitted&&form.zip.errors" class="text-danger">
<p *ngIf="form.zip.errors.required">Please enter zip code.</p>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck" formControlName="mstatus">
<label class="form-check-label" for="gridCheck">
Married
</label>
</div>
</div>
<button type="button" (click)="submitForm()" class="btn btn-primary">Submit</button>
</form>

Output

Required Validation

Email Validation

Set data in the form

Set value in form is also easy as to get value from the form.

Here we add a button in the HTML file on that button click we want to set data in the form.

<button class="btn btn-warning" type="button" (click)="setDataInForm()">Set Data In Form</button>

Create method in component.ts file for set data in your form field as show in below.

setDataInForm(){
this.form.name.setValue("Yogesh");
this.form.email.setValue("[email protected]");
this.form.address1.setValue("Abc Street");
this.form.address2.setValue("Abc steet 2");
this.form.city.setValue("Ahmedabad");
this.form.state.setValue("Gujarat");
this.form.zip.setValue("123456");
this.form.mstatus.setValue(true);
}

Output

I hope you find this article helpful and get information from it. If you like this article kindly share it with your friends and family.