Asynchronous Validation in Angular Reactive Forms

We all are familiar with synchronous validations in Reactive forms like Validators.Required, Validators.minLength(6) , but whenever there is a situation where we need to perform request to external API and based on its response we need to validate our form control, we can make use of asynchronous validators.

I am going to create a simple register form.User can enter his/her name, email and password, we will also check if provided name exists in the server, user will get an error.

Below is a register form component, where we are importing our NameValidator which has the logic to check for unique name. Angular does not fire asynchronous validators until every synchronous validations is satisfied.

Below is the NameValidator component which calls an external api.Here we define a function that returns a function of type AsyncValidatorFn .

AsyncValidatorFn returns a promise or observable.

At last we can use it in our component html file. Here invalidAsync is the error object name which we returning from name validator component.

This is how we can asynchronous validator, I hope you like the post.Share it and have a nice day🙂.