How can I implement async validators in Angular forms?

How can I implement async validators in Angular forms?

You can implement async validators in Angular by using the AsyncValidatorFn interface. This allows you to create custom validation logic that can return an observable.

Can you show me a code example of an async validator?

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 is the purpose of using async validators?

Async validators are useful for scenarios where validation requires a server call, such as checking if a username is already taken. They help ensure that the form is valid based on external data.