Async Validators
Validate against the server asynchronously.
Async Validators is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “Async Validators” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “Async Validators”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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.