import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export const placeRevealedValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {

  const fromPlace = control.get('fromPlace');

  const toPlace = control.get('toPlace');

  return fromPlace && toPlace && fromPlace.value === toPlace.value ? { 'placeRevealed': true } : null;

};

 initForm() {

    this.validateForm = this.fb.group(

      {

        Id: [0, [Validators.required]],

        fromPlace: [null, [Validators.required]],

        toPlace: [null, [Validators.required]],

        isValid: ['Y', [Validators.required]],

        language_Cd: ['zh-tw', [Validators.required]],

      },

      { validators: placeRevealedValidator }

    );

  }

  get fromPlace() {

    return this.validateForm.get('fromPlace') as any;

  }

  get toPlace() {

    return this.validateForm.get('toPlace') as any;

  }

<nz-form-control>

              <nz-select nzAllowClear formControlName="toPlace"

            class="inputs">

            <nz-option *ngFor="let item of place" [nzLabel]="item.routePlace" [nzValue]="item.routePlace">

            </nz-option>

          </nz-select>

          <div *ngIf="validateForm.errors?.['placeRevealed'] &&fromPlace.dirty &&toPlace.dirty"

            class="alert alert-danger">

          出發地和目的地不能相同

          </div>

          </nz-form-control>

import { AbstractControl,  } from "@angular/forms";

import { catchError, map, of } from "rxjs";

import { DpaService } from "src/app/services/apis/dpa.service";

export class EmpIdRevealedValidators {

  static EmpIdValidator(dpaService: DpaService) {

      return (control: AbstractControl) => {

          if (!control.valueChanges) {

              return of(null);

          } else {

              return dpaService.GetUserByEmpId(control.value)

                .pipe(

                      map((isTaken: any) =>{

                       return (isTaken.length==0 ? { 'empIdRevealed': true } : null)

                      } ),

                      catchError(() => of(null))

                    );

          }

      }

  }

}

 initForm() {

    this.validateForm = this.fb.group({

      process: [this.process[0], [Validators.required]],

      bo: [null, [Validators.required]],

      site: [null, [Validators.required]],

      emplId:[null,{

        validators: [Validators.required],

        asyncValidators:EmpIdRevealedValidators.EmpIdValidator(this.dpaService),

        updateOn: 'blur' //鼠标移开后验证，还有change和submit

        }],

      isValid: ['Y', [Validators.required]],

    });

  }

  get emplId() {

    return this.validateForm.get('emplId') as any;

  }

<nz-form-item>

          <nz-form-label>工號</nz-form-label>

          <nz-form-control>

            <input nz-input [readonly]="this.apiAction==='Update'" formControlName="emplId"  class="inputs">

          <div *ngIf="emplId.errors?.['empIdRevealed']&&emplId.dirty "

            class="alert alert-danger">

            工號不存在

          </div>

          </nz-form-control>

        </nz-form-item>