Angular Forms and Async Validator Functions
Published in
2 min readAug 5, 2019
A common pattern in angular I find myself doing is to adding AsyncValidatorFn to my forms to check against a database that a value does not already exist.
Example: Login Forms
In this example, I want to add a AsyncValidatorFn to my formControl. This form has only one field called username.
Based on any business scenario you may need to add or remove async validators, so here I wrap it in a function.
Below is the AsyncValidatorFn. It checks the form against a hardcoded value test@test.test, but you could change the logic for your case. It could be checking through an array (from a database) to see if the value exists or not.
After typing in the reserved test value, below you can see the result:
