Angular Async Validator - Medium Post

email-validator.directive.ts

import { Directive } from '@angular/core';
import { AsyncValidatorFn, AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import { ProductService } from '../product-service';
import { map, tap } from 'rxjs/operators';

export function existingProductCodeValidator(productService: ProductService): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    return productService.getProductByCode(control.value).pipe(
      map(product => product ? {"productExists": true} : null),
      tap(res => control.setErrors(res))
    ).first();
  };
}

@Directive({
  selector: '[productExists][formControlName],[productExists][formControl],[productExists][ngModel]',
  providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: ExistingProductValidatorDirective, multi: true}]
})
export class ExistingProductValidatorDirective implements AsyncValidator {
  constructor(private userService: UserService) {  }

  validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
     return existingProductCodeValidator(this.productService)(control);
  }
} 

product-search.component.html

<div class="form-group">
  <label for="productCode">Enter Product Code: </label>
  <input formControlName="productCode" id="productCode" />
  <div *ngIf="form.get('productCode').hasError('productExists')">
    Product code found! Please continue.
  </div>
</div>

product-search.component.ts

import { existingProductCodeValidator } from 'email-validator.directive';  // Import product code validator function

@Component({
   selector: 'product-search',
   templateUrl: './product-search.component.html'
})
export class ProductSearchFormComponent implements OnInit {
  
  userForm: FormGroup; 
  constructor(private formBuilder:FormBuilder, private productService: ProductService) {
  }

  ngOnInit() {
    this.userForm = this.formBuilder.group({
      productCode: ['',
            [ Validators.required ], //sync validators
            [ existingProductCodeValidator(this.productService) ] //async validators
      ],
      otherFields: ['', 
            [ Validators.required], //sync validators
      ]
    });
  }
 
  
}