Creating custom validators in Angular isn\u2019t anything new for me, I must have created dozens of them over the years, but strangely enough I haven\u2019t had to create \u201casync\u201d validators in recent memory. When I tried to find more information about making a custom validator that returned an observable (or a promise), there really wasn\u2019t a heck of a lot of information out there. Or more so, it was spread out in piecemeal code slices.<\/p>\n\n\n\n
This post should hopefully group some of the core concepts together, specifically, at the end I will show how to create a \u201cdebounce\u201d validator that only runs when a user stops typing, as this for me was the hardest thing to find examples of!<\/p>\n\n\n\n
For the purposes of this article, I\u2019m going to write an async validator that calls an API to check if a username is currently in use or not. Imagine I\u2019m using this on a sign up form to make sure that no two users pick the same username.<\/p>\n\n\n\n
The full code is actually quite simple and looks like so :<\/p>\n\n\n\n
import { Directive, forwardRef} from '@angular\/core';\nimport { AbstractControl, AsyncValidator, NG_ASYNC_VALIDATORS, ValidationErrors } from '@angular\/forms\/';\nimport { Observable } from 'rxjs';\nimport { map } from 'rxjs\/operators';\nimport { AccountService } from '..\/services\/account.service';\n\n@Directive({\n selector: '[usernameCheck]', \n providers: [\n {\n provide: NG_ASYNC_VALIDATORS, \n useExisting: forwardRef(() => UsernameCheckDirective), \n multi: true\n }\n ]\n })\n export class UsernameCheckDirective implements AsyncValidator {\n constructor(private accountService : AccountService) {\n }\n \n validate(control: AbstractControl): Observable<ValidationErrors | null> {\n return this.accountService.exists(control.value).pipe(map(x => x.exists ? { exists : true} : null))\n }\n}<\/code><\/pre>\n\n\n\nThere are a couple of things to point out. First notice that my provider name is NG_ASYNC_VALIDATORS and *not*<\/strong> NG_VALIDATORS. This is so<\/em> important because Angular won\u2019t complain if you use NG_VALIDATOR here, instead it will just never show an error (Very very annoying and took me a very long time to debug).<\/p>\n\n\n\nNext notice that my validator method returns an observable. For this, I call my AccountService which has a method called \u201cExists\u201d. This returns an object with a boolean property called \u201cexists\u201d. If true, it means the username is taken and I should return an object like so<\/p>\n\n\n\n
{ exists : true}<\/code><\/pre>\n\n\n\nOtherwise, I should return null.<\/p>\n\n\n\n
Easy right?<\/p>\n\n\n\n
When I write HTML to use this, I can just do the following :<\/p>\n\n\n\n
<input name=\"username\" \n #username=\"ngModel\" \n type=\"text\" \n class=\"form-control\" \n [(ngModel)]=\"createAccount.name\" \n [usernameCheck]\n required \/>\n<div class=\"validation-message\" *ngIf=\"username?.errors?.exists\">\n Username \"{{createAccount.name}}\" is already in use\n<\/div><\/code><\/pre>\n\n\n\nNothing too special and it works perfectly fine!<\/p>\n\n\n\n
Ignoring Empty Values<\/h3>\n\n\n\n
The first issue I ran into is that as soon as my form loads, I could see it pinging the server to check if a username existed, before I\u2019ve even typed a single character! What I needed was a quick short circuit to return an empty value if the control was empty. Something like this did the trick perfect!<\/p>\n\n\n\n
validate(control: AbstractControl): Observable<ValidationErrors | null> {\n if(!control.value) {\n return of(null);\n }\n return this.accountService.exists(control.value).pipe(map(x => x.exists ? { exists : true} : null))\n}<\/code><\/pre>\n\n\n\nNow, when the value of my control is empty, the validator simply returns null (e.g. There are no errors), and we are good to go.<\/p>\n\n\n\n
But then there was another issue\u2026.<\/p>\n\n\n\n
Debouncing The Validation<\/h3>\n\n\n\n
What I noticed was that as I typed, I would validate every single keystroke by calling the backend API. This was way overkill and was resulting in 10\u2019s of API calls when all someone was trying to do was fill in their username. What I needed was instead of validating every single key press, I needed to wait until the user stopped typing, then go ahead and validate the username. This in Angular terms is usually called \u201cdebouncing\u201d.<\/p>\n\n\n\n