In this article, will explore how angular reactive forms validation works. One of the common tasks that is performed, while building a form is Validation. We will show you how to build Reactive Forms and apply Built-in validators. In the next tutorial, you will learn how to create custom validators in Reactive Forms.
We looked at how the validation works in the Template-driven Forms tutorial. Most of the concepts explained in that tutorial are equally applicable here.
A Validator is a function that checks the instance of FormControl,FormGroup or a FormArray and returns a list of errors. If the Validator returns a null means that validation has passed
We configure the validators as the second and third argument to the FormControl, FormGroup or FormArray in the component class. The second argument is a collection of sync validators and the third argument is a collection of an async validators.
sync validators runs validations and returns immediately. They either
return
a list of errors or null if no errors found.
async validators: returns a Promise or
Observable. They either return a list of errors or null if no errors are found.
The Angular ReactiveForms Module provides several Built-in validators out of the box. They are required, minlength, maxlength & pattern etc.
W learned how to create Angular Reactive Forms in the previous tutorial. We will now add some of the built-in validators to that example.
Here is the contactForm model from the previous tutorial.
contactForm = new FormGroup({
firstname: new FormControl(''),
lastname: new FormControl(''),
email:new FormControl(''),
gender: new FormControl(''),
isMarried: new FormControl(''),
country: new FormControl(''),
address:new FormGroup({
city: new FormControl(''),
street: new FormControl(''),
pincode:new FormControl('')
})
})
First, we need to disable browser validator by adding the novalidate attribute to the <form> element as shown below. If this attribute is present then the form is not validated by the built-in HTML5 validation when submitted.
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
The mentioned earlier, the Angular has provided several built-in validators out of the box.
The required validator is a sync validator, which returns true only if the formcontrol has a non-empty value entered. The second argument of the FormControl takes the Sync Validator.
firstname: new FormControl('',[Validators.required]),
Minlength validator requires the control value must not have less number of characters than the value specified in the validator.
For Example, minlength validator ensures that the firstname value has at least 10 characters.
firstname: new FormControl('',[Validators.required,Validators.minLength(10)]),
This Validator requires that the number of characters must not exceed the value specified in the validator.
lastname: new FormControl('',[Validators.maxLength(15)]),
This Validator requires that the control value must match the regex pattern provided in the attribute. For example, the pattern ^[a-zA-Z]+$ ensures that the only letters are allowed (even spaces are not allowed). Let us apply this pattern to the lastName
lastname: new FormControl('',[Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]),
This Validator requires that the control value must be a valid email address. We apply this to the email field
email:new FormControl('',[Validators.email,Validators.required]),
After adding all the validators, our final contactForm will look like this.
contactForm = new FormGroup({
firstname: new FormControl('',[Validators.required,Validators.minLength(10)]),
lastname: new FormControl('',[Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]),
email:new FormControl('',[Validators.email,Validators.required]),
gender: new FormControl('',[Validators.required]),
isMarried: new FormControl('',[Validators.required]),
country: new FormControl('',[Validators.required]),
address:new FormGroup({
city: new FormControl('',[Validators.required]),
street: new FormControl('',[Validators.required]),
pincode:new FormControl('',[Validators.required])
})
})
We need to provide a short and meaningful error message to the user. We do that by using the error object returned by the FormControl instance
Every form element has a FormControl instance associated with it. It exposes the state of form element like valid, dirty, touched etc.
There are two ways in which you can get the reference to the FormControl.
One way is to use the contactForm variable. We can use contactForm.controls.firstname.valid to find out if the firstname is valid.
<div
*ngIf="!contactForm.controls.firstname?.valid && (contactForm.controls.firstname?.dirty
||contactForm.controls.firstname?.touched)">
First Name is not valid
</div>
The other way to is to define getter function for each FormControl instance in the component class.
get firstname() {
return this.contactForm.get('firstname');
}
and then use it in the template as follows
<div *ngIf="!firstname.valid && (firstname.dirty ||firstname.touched)">
First Name is not valid
</div>
Apart from checking valid we are also checking for the dirty & touched. Because we do not want the application to display the error when the form is displayed for the first time. We want to display errors only after the user has attempted to change the value. The dirty & touched properties help us do that.
dirty: A control is dirty if the user has changed the value in the
UI.
touched: A control is touched if the user has triggered a blur event on it.
The error message “First Name is not valid” is not helpful. The firstname has two validators. required and minlength
Any errors generated by the failing validation is updated in the
errors object. The errors object returns the error object or null if there are no
errors.
<div
*ngIf="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
<div [hidden]="!firstname.errors.required">
First Name is required
</div>
<div [hidden]="!firstname.errors.minlength">
Min Length is 10
</div>
</div>
app.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular Reactive forms';
contactForm = new FormGroup({
firstname: new FormControl('',[Validators.required,Validators.minLength(10)]),
lastname: new FormControl('',[Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]),
email:new FormControl('',[Validators.email,Validators.required]),
gender: new FormControl('',[Validators.required]),
isMarried: new FormControl('',[Validators.required]),
country: new FormControl('',[Validators.required]),
address:new FormGroup({
city: new FormControl('',[Validators.required]),
street: new FormControl('',[Validators.required]),
pincode:new FormControl('',[Validators.required])
})
})
get firstname() {
return this.contactForm.get('firstname');
}
get lastname() {
return this.contactForm.get('lastname');
}
get email() {
return this.contactForm.get('email');
}
get gender() {
return this.contactForm.get('gender');
}
get isMarried() {
return this.contactForm.get('isMarried');
}
get country() {
return this.contactForm.get('country');
}
get city() {
return this.contactForm.get("address").get('city');
}
get street() {
return this.contactForm.get("address").get('street');
}
get pincode() {
return this.contactForm.get("address").get('pincode');
}
countryList: country[] = [
new country("1", "India"),
new country('2', 'USA'),
new country('3', 'England')
];
onSubmit() {
console.log(this.contactForm.value);
}
}
export class contact {
firstname:string;
lastname:string;
gender:string;
isMarried:boolean;
country:string;
address: {
city:string;
street:string;
pincode:string;
}
}
export class country {
id: string;
name: string;
constructor(id: string, name: string) {
this.id = id;
this.name = name;
}
}
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
<p>
<label for="firstname">First Name </label>
<input type="text" id="firstname" name="firstname" formControlName="firstname">
</p>
<div
*ngIf="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
<div [hidden]="!firstname.errors.required">
First Name is required
</div>
<div [hidden]="!firstname.errors.minlength">
Min Length is 10
</div>
</div>
<p>
<label for="lastname">Last Name </label>
<input type="text" id="lastname" name="lastname" formControlName="lastname">
</p>
<div *ngIf="!lastname.valid && (lastname.dirty ||lastname.touched)">
<div [hidden]="!lastname.errors.pattern">
Only characters are allowed
</div>
<div [hidden]="!lastname.errors.maxLength">
Max length allowed is {{lastname.errors.maxlength?.requiredLength}}
</div>
<div [hidden]="!lastname.errors.required">
Last Name is required
</div>
</div>
<p>
<label for="email">Email </label>
<input type="text" id="email" name="email" formControlName="email">
</p>
<div *ngIf="!email.valid && (email.dirty ||email.touched)">
<div [hidden]="!email.errors.required">
email is required
</div>
<div [hidden]="!email.errors.email">
invalid email id
</div>
</div>
<p>
<label for="gender">Geneder </label>
<input type="radio" value="male" id="gender" name="gender" formControlName="gender"> Male
<input type="radio" value="female" id="gender" name="gender" formControlName="gender"> Female
</p>
<div *ngIf="!gender.valid && (gender.dirty ||gender.touched)">
<div [hidden]="!gender.errors.required">
gender is required
</div>
</div>
<p>
<label for="isMarried">Married </label>
<input type="checkbox" id="isMarried" name="isMarried" formControlName="isMarried">
</p>
<div *ngIf="!isMarried.valid && (isMarried.dirty ||isMarried.touched)">
<div [hidden]="!isMarried.errors.required">
isMarried is required
</div>
</div>
<p>
<label for="country">country </label>
<select id="country" name="country" formControlName="country">
<option [ngValue]="c.id" *ngFor="let c of countryList">
{{c.name}}
</option>
</select>
</p>
<div *ngIf="!country.valid && (country.dirty ||country.touched)">
<div [hidden]="!country.errors.required">
country is required
</div>
</div>
<div formGroupName="address">
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" name="city" formControlName="city">
</div>
<div *ngIf="!city.valid && (city.dirty ||city.touched)">
<div [hidden]="!city.errors.required">
city is required
</div>
</div>
<div class="form-group">
<label for="street">Street</label>
<input type="text" class="form-control" name="street" formControlName="street">
</div>
<div *ngIf="!street.valid && (street.dirty ||street.touched)">
<div [hidden]="!street.errors.required">
street is required
</div>
</div>
<div class="form-group">
<label for="pincode">Pin Code</label>
<input type="text" class="form-control" name="pincode" formControlName="pincode">
</div>
<div *ngIf="!pincode.valid && (pincode.dirty ||pincode.touched)">
<div [hidden]="!pincode.errors.required">
pincode is required
</div>
</div>
</div>
<p>{{contactForm.valid}} </p>
<p>
<button type="submit" [disabled]="!contactForm.valid">Submit</button>
</p>
</form>
<!-- <div ngModelGroup="address">
<p>
<label for="city">City</label>
<input type="text" id="city" name="city">
</p>
<p>
<label for="street">Street</label>
<input type="text" id="street" name="street">
</p>
<p>
<label for="pincode">Pin Code</label>
<input type="text" id="pincode" name="pincode">
</p>
</div> -->
We just learned how Angular Reactive Forms Validation works.
List of All Articles on Angular Forms
