Asynchronous validation of a form in Angular

Sameer Gurung
Fuzzy Code
Published in
2 min readJan 21


Here is an example of how you could add asynchronous validation to a form in Angular:

  1. First, you’ll need to import the FormControl and FormGroup classes from the @angular/forms module, as well as any other modules that you'll need for your validation logic.
import { FormControl, FormGroup } from '@angular/forms';

2. Next, you’ll need to create a new FormControl for the input field that you want to add asynchronous validation to. You can do this by passing an initial value to the FormControl constructor. = new FormControl('', []);

3. Now you will add the async validation logic in a async validator,

emailChecker(control: FormControl) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (control.value === '') {
resolve({ emailTaken: true });
} else {
}, 2000);

4. Next you will add this async validator to form control and create a form group;
this.form = new FormGroup({email:});

5. Now, you can use this form in your template and use the built-in ng-invalid and ng-valid classes to apply styles to the input field based on its validation status

<form [formGroup]="form">
<input type="text" formControlName="email">
<div *ngIf="email.invalid && email.errors.emailTaken">
Email already taken

6. Finally you can use the form.statusChanges, form.valueChanges or form.status to listen to the changes and to check the validation status.

this.form.statusChanges.subscribe(status => {

This is just an example, and you’ll likely need to adapt it to suit the specific needs of your application. Additionally this is a very basic example, you can use more complex ways to check for the errors using services and APIs.



Sameer Gurung
Fuzzy Code

A Software Engineer, who also turns to be a JavaScript enthusiast. Currently working with NodeJs, Angular, Ionic and AWS. Catch me: