如何在Angular中使用自定義驗證器

在Angular中使用自定義驗證器可以通過創建一個自定義指令來實現。以下是一個簡單的示例：

1. 首先，在你的 Angular 應用中創建一個自定義指令，并在該指令中實現自定義驗證邏輯。例如，你可以創建一個指令來驗證密碼是否符合一定的規則：

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

@Directive({
  selector: '[appPasswordValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: PasswordValidatorDirective, multi: true}]
})
export class PasswordValidatorDirective implements Validator {
  @Input('appPasswordValidator') passwordPattern: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    const value = control.value;
    const pattern = new RegExp(this.passwordPattern);
    
    if (!pattern.test(value)) {
      return { 'invalidPassword': true };
    }
    
    return null;
  }
}

2. 然后，在模板中使用該自定義指令并傳入驗證規則：

<input type="password" name="password" [(ngModel)]="password" 
   appPasswordValidator="[A-Za-z0-9]{8,}"/>
<div *ngIf="password.invalid && (password.dirty || password.touched)">
  <div *ngIf="password.errors.invalidPassword">
    Password must be at least 8 characters long and contain only letters and numbers.
  </div>
</div>

3. 最后，確保在模塊中引入并聲明該自定義指令：

import { PasswordValidatorDirective } from './password-validator.directive';

@NgModule({
  declarations: [
    PasswordValidatorDirective
  ]
})
export class YourModule {}

通過以上步驟，你就可以在 Angular 中使用自定義驗證器來驗證表單輸入的數據。