Best Way To Create Async Validators in Angular 10 Reactive Forms

In this tutorial, we will see ho can we create a Create Async Validators in Angular 10 Reactive Forms that validates the form data based on the HTTP API response.
We will be creating the custom validator that connects with service and component form and validates the user selection.
Example Usecase
Suppose the address form contains a closed field, and on switching the closed field to true, we will call an API which checks that is there any pending order on that address available using an async validator.

Async Validators Class

Lets first create a custom async validator class inside that our static method will be there which will accept the two parameters in which first will accept the service class and second will accept the component class.

import { AbstractControl, ValidatorFn } from '@angular/forms';
import { OrderService } from '../services/order.service';
import { AddressesFormComponent } from '../../addresses/addresses-form/addresses-form.component';

/**
 * Class for async validations communicating with the REST-API.
 */
export class AppAsyncValidators {

  /**
   * Checks if a given address has orders assigned with In Process status.
   * @param service - The order service.
   * @param component - The address form component.
   * @returns {(control:AbstractControl)=>Promise<T>}
   */
  public static orderInProcess(service: OrderService, component: AddressesFormComponent): ValidatorFn {
    return (control: AbstractControl) => {
      return new Promise((resolve) => {
        if (control.value === false) { // on switching address closed : false
          return resolve(null);
        } else {                       // on switching address closed : false
          // addressID : From Component
          service.checkOrderByAddress(component.addressID, 'InProcess').subscribe((orders: any) => {
            if (orders && orders.length > 0) {
              return resolve({ordersInProcess: true});
            } else {
              return resolve(null);
            }
          });
        }
      });
    };
  }
}

Setting Validator in Reactive Form

The next thing we will do is we will set this custom validator inside the closed field of address form.

export class AddressesFormComponent implements OnInit {
  @Input() addressID: string;
  ...
  public addressForm: FormGroup = this.formBuilder.group({
    Address: ['', Validators.maxLength(1200)],
    Zip: ['', Validators.maxLength(10)],
    City: ['', Validators.maxLength(50)],
    State: ['', Validators.maxLength(100)],
    Country: ['', Validators.maxLength(100)],
    // ...
    Closed: [false, null, AppAsyncValidators.orderInProcess(this.orderService, this)] // async Validator
  });
  ...
}

Show Async Validators Error in HTML

The last thing is we have to display the error based on the API response and the promise which we resolved in the AppAsyncValidators class.

...
<mat-slide-toggle formControlName="Closed" >
  <span *ngIf="addressForm.get('Closed').value"> Opened </span>
  <span *ngIf="!addressForm.get('Closed').value"> Closed </span>
  <!-- ordersInProcess: gets from resolved value -->
  <mat-error *ngIf="addressForm.get('Closed').hasError('ordersInProcess')">
    Address cannot be set closed it have pending orders.
  </mat-error>
</mat-slide-toggle>
...