How can I implement async validation in Angular forms?

How can I implement async validation in Angular forms?

You can implement async validation in Angular by using the AsyncValidatorFn interface. This allows you to create a custom validator that returns an observable.

Can you show me a code example of that?

Sure! Here's a simple example:

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

export function uniqueUsernameValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
    return checkUsername(control.value).pipe(
      map(isTaken => (isTaken ? { usernameTaken: true } : null)),
      catchError(() => of(null))
    );
  };
}

In this example, checkUsername would be a function that checks if the username is already taken.

What if I want to validate multiple fields asynchronously?

You can create a custom async validator that takes multiple controls as parameters. You can then validate them together within the same observable.