angular如何为模板驱动表单的交叉字段验证编写指令

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appCrossFieldValidator]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: CrossFieldValidatorDirective,
      multi: true
    }
  ]
})
export class CrossFieldValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const password = control.get('password');
    const confirmPassword = control.get('confirmPassword');

    if (password && confirmPassword && password.value !== confirmPassword.value) {
      return { crossField: true };
    }

    return null;
  }
}

<form>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" ngModel>
  </div>
  <div>
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" id="confirmPassword" name="confirmPassword" ngModel appCrossFieldValidator>
    <div *ngIf="form.controls.confirmPassword.errors?.crossField">Passwords do not match</div>
  </div>
</form>