How do I implement async validators in Angular forms?

How do I implement async validators in Angular forms?

To implement async validators in Angular forms, you can use the AsyncValidatorFn interface. You typically create a function that returns a promise or an observable.

Can you show me a code example?

Sure! Here's a simple example:

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';

export function uniqueUsernameValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return this.userService.checkUsername(control.value).pipe(
      map(isTaken => (isTaken ? { usernameTaken: true } : null)),
      catchError(() => of(null))
    );
  };
}

What if I want to validate multiple fields asynchronously?

You can create a custom async validator that checks multiple fields by accessing the values of the controls in the form group. Use AbstractControl.parent to get the parent form group.