How can I implement async validation in Angular forms using Angular CLI?

How can I implement async validation in Angular forms using Angular CLI?

To implement async validation in Angular forms, you can create a custom validator that returns an observable. This allows you to perform asynchronous checks, like verifying if a username is already taken.

Can you show me a code example for that?

Sure! Here's a simple example:

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

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

function checkUsername(username: string): Observable<boolean> {
  // Simulate an API call to check if the username is taken
  return of(username === 'existingUser');
}

You can then use this validator in your form control.

What if I want to add multiple async validators?

You can add multiple async validators by passing an array of validators to the asyncValidators property of your form control. For example:

this.form = this.fb.group({
  username: ['', {
    asyncValidators: [usernameAsyncValidator(), anotherAsyncValidator()]
  }]
});