隨記

Week 05 · Day 06 — 自訂驗證器

學習目標

  • 了解 ValidatorFn 與 AbstractControl
  • 撰寫自訂驗證器
  • 運用到 FormGroup 中

重點

自訂驗證器 - 一個回傳 ValidatorFn 的函式 - 驗證器本身接收 AbstractControl，回傳錯誤物件或 null 

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

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? { forbiddenName: { value: control.value } } : null;
  };
}
- 通過 → 回傳 null - 失敗 → 回傳錯誤物件 { forbiddenName: { value } }

使用（在 FormBuilder） 

this.registerForm = this.fb.group({
  username: ['', [Validators.required, forbiddenNameValidator(/admin/i)]]
});
- 輸入內容含有 admin（不分大小寫）即驗證失敗

顯示錯誤 

<div *ngIf="username?.errors?.['forbiddenName']">
  此名稱不可使用
</div>
或用 hasError('forbiddenName')。

實作

  1. 撰寫 forbiddenNameValidator 函式
  2. 套用於 username 欄位驗證 /admin/i
  3. 輸入 "administrator" 觀察錯誤出現

作業

  • 撰寫一個自訂驗證器函式
  • 運用在某個欄位的驗證器陣列中
  • 實測：符合條件時 .errors 會長怎樣