Async Validators
Validate against the server asynchronously.
Async Validators is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Validation That Waits
Some validation needs a server, such as checking if a username is taken. Async validators return a Promise or Observable that resolves to an error map or null.
The AsyncValidatorFn Type
An async validator takes a control and returns Observable<ValidationErrors | null> (or a Promise).
const v: AsyncValidatorFn = (control) => {
return checkAvailable(control.value);
};Returning null Means Valid
Resolve to null when valid, or an error object like { taken: true } when invalid, exactly like sync validators.
A Username Validator
This validator calls a service and maps the result.
usernameValidator(api: UserApi): AsyncValidatorFn {
return (control) =>
api.isTaken(control.value).pipe(
map(taken => taken ? { taken: true } : null)
);
}Registering It
Async validators go in the third argument of a control, separate from sync validators.
new FormControl('', {
validators: [Validators.required],
asyncValidators: [usernameValidator(api)]
});The PENDING State
While an async validator runs, the control's status is PENDING. Use it to show a spinner.
@if (form.controls.username.pending) {
<span>Checking...</span>
}Debouncing Requests
Async validators fire on every value change. Debounce to avoid hammering the server.
return timer(300).pipe(
switchMap(() => api.isTaken(control.value)),
map(taken => taken ? { taken: true } : null)
);switchMap Cancels Stale Calls
Using switchMap cancels the previous in-flight request when the value changes again, so only the latest result matters.
updateOn Strategy
Set updateOn: 'blur' so async validation runs only when the user leaves the field, reducing requests.
new FormControl('', {
asyncValidators: [usernameValidator(api)],
updateOn: 'blur'
});Reading the Error
Display the error once validation resolves and the control is dirty/touched.
@if (form.controls.username.hasError('taken')) {
<span>Username already taken</span>
}Best Practices
Always debounce, cancel stale requests, show a pending indicator, and handle network errors so the form does not get stuck in PENDING.
Quick Check
Test your understanding of async validators.
Recap
You learned that AsyncValidatorFn returns an Observable/Promise of ValidationErrors | null, registered in the third control argument, putting the control in PENDING. Debounce and use switchMap to manage server calls.
Frequently asked questions
Is the “Async Validators” lesson free?
Yes — the full text of “Async Validators” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Async Validators”?
Validate against the server asynchronously. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Async Validators” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.