Asynchronous Validator in Angular

Asynchronous validators are similar to synchronous validators where in synchronous validation will mostly a kind of validation at client side (client side validation) , but in asynchronous validation a request will made to your API to get the requested data and validate accordingly. Asynchronous validator returns observable if validation fails or returns null is validation passed.

Now , lets take an example where we can use Asynchronous validators. For example , in your application you are designing a feature to update the password of the user account.

Update feature form contains 3 form controls , old password , new password and confirm new password . So before updating the password , you want to validate the old password if the entered old password is correct or not.

We can achieve this functionality in 2 ways . one is getting the data from the form and making an Http request to your backend API , where API is responsible for validating the old password . But it is the traditional way of doing it . Other way us , with the help of asynchronous validators , once user enters old password in input text field asynchronous will validate if password is correct or not.

Now , lets see how to create Asynchronous validator in Angular and how to use it.

Below is the angular service which is responsible for making the http request to your backend service.

Above service will return true if oldpassword given by the user matches with data available in the database or else returns false.

Below is the asynchronous validator.

To create an asynchronous validator we need to implement AsyncValidatorFn.

In above validator , it is calling oldpassword service which in turns makes an Http request . If the response is true we are returning null or else we are returning a key value pair with error key name as “notmatched” where this key used in template file to show validation messages. Now that we have created an asynchronous validator . Lets see how to use it in our application.

Below is component class.

Now , to use asynchronous validator , since i have used angular reactive forms where each FormControl accepts the set of parameters . As in the above code snippet first param is the default value for the form control which will be displayed when component is loaded . second param is object where first key value is synchronous validators list and in the second param we can specify our asynchronous validator list . so there we pass our asynchronous validator by injecting the required service and parameters . But here we have a small glitch.

That is for every key press our asynchronous validator triggers which is not recommended . We have to wait until user is done with entering the input.

If you look at the below screen shoot for every key press , an API requested is made by asynchronous validator.

To fix this angular provides us with a property called “updateon:blur” which triggers asynchronous validator only user blurs out of the form control on which asynchronous validator is applied.

Now in above screen shot there is only one API request is made.

Now lets see how to display error message in UI based on the error key we returned from asynchronous validator.

Below is the template.

In above template on old password form control we are checking if oldpassword form control has an error with error key “notmatched” and based on that we are displaying the error message.

One of the useful feature provided is unless all synchronous validators are passed , angular does not trigger any asynchronous validators.

SUMMARY

Asynchronous validators are very useful when you want to perform some server side validations.