Template-driven and Reactive Forms – Angular Tutorial

In this blog, we will learn about Template driven and Reactive Forms in Angular. Angular provides more than one way to build forms for user input and form validation.

Template-driven Approach

In the template-driven approach, Forms input and Forms validation logic go into the component’s HTML file only. The template-driven approach is fine for small or medium-level projects. But, if we are working on a huge project, then we must go for the Reactive form approach which we will see later in this blog.

Form Validation is used to improve the quality of input data by the user.

Read:- Angular Interview Questions

Template Driven approach implementation

We will create a new component in our Angular App. Let’s say user-reg. To create a component use the below command.

ng g c /formexample/user-reg

Go to the root module and import FormsModule as shown below –

import {FormsModule} from ‘@angular/forms’

and

imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],

user-reg.component.html file code

<form action=“” method=“POST” #frm=“ngForm”>
<div class=“form-group”>
<label for=“”>Name</label>
<input type=“text” name=“name” class=“form-control” [(ngModel)]=“name” #nam=“ngModel”
pattern=“[a-z ]+” required>
<div *ngIf=“nam.invalid && (nam.dirty || nam.touched) class=“alert alert-danger”>
<div *ngIf=“nam.errors.required”>
Name is Required
</div>
<div *ngIf=“nam.errors.pattern”>
Name is Invalid
</div>
</div>
<br>
<label for=“”>Mobile</label>
<input type=“text” name=“Mobile” class=“form-control” [(ngModel)]=“mobile”
#mob=“ngModel” required pattern=“[6-9]+[0-9]{9}”>
<div *ngIf=“mob.invalid && mob.touched” class=“alert alert-danger”>
<div *ngIf=“mob.errors.required”>
Mobile is Required
</div>
<div *ngIf=“mob.errors.pattern”>
Mobile Number is Invalid
</div>
</div>
<br>
<label for=“”>Email</label>
<input type=“text” name=“Email” class=“form-control” [(ngModel)]=“email”
#email1=“ngModel” required pattern=“[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,6}$”>
<div *ngIf=“email1.invalid && email1.touched” class=“alert alert-danger”>
<div *ngIf=“email1.errors.required”>
Emaile is Required
</div>
<div *ngIf=“email1.errors.pattern”>
Email is Invalid
</div>
</div>
<br>
<label for=“”>Query</label>
<textarea name=“query” id=“” cols=“30” rows=“10” class=“form-control”
[(ngModel)]=“userquery” #uquery=“ngModel” required></textarea>
<div *ngIf=“uquery.invalid && uquery.touched” class=“alert alert-danger”>
<div *ngIf=“uquery.errors.required”>
Query is Required
</div>
</div>
<br>
<button>Submit</button>
</div>
</form>

Touched and Dirty check on input control is to prevent errors from showing until the user does one of 2 things –

Changes the Value and setting the control to touch.

Reactive Form Approach

In the Reactive Form approach, the validation function is written in the component class. Angular calls this function whenever there is a change of value in the input control.

The reactive Form Approach is the best practice if we are working on a big Angular project.

Reactive Form approach implementation

In the Reactive form approach, we have to import ReactiveFormsModule along with FormsModule

import {FormsModule,ReactiveFormsModule} from ‘@angular/forms’;

and

imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],

Import FormGroup, FormBuilder and Validators in user-reg.component.ts file

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

Below is the UserRegComponent class

First, declare a property userForm of type FormGroup
Initialize FormBuilder in the constructor.

Create a method with the name FromValidation(), you can give any name.
Write the logic inside this function and call this function within ngOnInit()

export class UserRegComponent implements OnInit {
userForm:FormGroup;
constructor(private userFrmB:FormBuilder) { }
FormValidation()
{
this.userForm = this.userFrmB.group
(
{
‘name’:[,Validators.required],
‘mobile’:[,Validators.compose
(
[Validators.required, Validators.pattern(“[6-9][0-9]{9}”)]
)],
’email’:[,Validators.required]
}
)
}
ngOnInit() {
this.FormValidation();
}
}

user-reg.component.html

Use an attribute [formGroup] on <form> tag
Give a formControlName to all input fields as shown below.

<form action=“” method=“POST” [formGroup]=“userForm”>
<div class=“form-group”>
<label for=“”>Name</label>
<input type=“text” name=“name” class=“form-control” formControlName=“name”>
<div *ngIf=“userForm.controls.name.invalid && (userForm.controls.name.dirty ||
userForm.controls.name.touched)” class=“alert alert-danger”>
<div *ngIf=“userForm.controls.name.errors.required”>
Name is Required
</div>
</div>
<br>
<label for=“”>Mobile</label>
<input type=“text” name=“Mobile” class=“form-control” formControlName=“mobile”>
<div *ngIf=“userForm.controls.mobile.invalid && (userForm.controls.mobile.touched ||
userForm.controls.mobile.dirty)” class=“alert alert-danger”>
<div *ngIf=“userForm.controls.mobile.errors.required”>
Mobile is Required
</div>
<div *ngIf=“userForm.controls.mobile.errors.pattern”>
Mobile is Invalid
</div>
</div>
<br>
<label for=“”>Email</label>
<input type=“text” name=“Email” class=“form-control” formControlName=“email”>
<div *ngIf=“userForm.controls.email.invalid && (userForm.controls.email.touched ||
userForm.controls.email.dirty)” class=“alert alert-danger”>
<div *ngIf=“userForm.controls.email.errors.required”>
Email is Required
</div>
</div>
<br>
<input type=“submit” value=“Submit” [disabled]=“userForm.invalid”>
</div>
</form>

Output

Below is the demo of the above implementation.

Conclusion

So, in this article, we demonstrated template-driven and Reactive Forms. We also understand where to use Template forms and when to implement Reactive forms.

You may like other blogs –

Prev – Angular PIPES
Next – Angular Routes

Leave a Comment

RSS
YouTube
YouTube
Instagram