Validators如何創建和應用于表單驗證

Validators 可以通過 Angular 中的 Validators 類來創建和應用于表單驗證。

1. 導入 Validators 類：

import { Validators } from '@angular/forms';

2. 創建 Validators： 可以使用 Validators 類中的一些靜態方法來創建 Validators，例如：

• Validators.required：用于驗證輸入是否為空
• Validators.minLength：用于驗證輸入的最小長度
• Validators.maxLength：用于驗證輸入的最大長度
• Validators.pattern：用于驗證輸入是否符合指定的正則表達式

例如，創建一個驗證輸入是否為必填項的 Validator：

const requiredValidator = Validators.required;

3. 應用 Validators 到表單控件： 在 Angular 表單中，可以通過 Validators.required、Validators.minLength、Validators.maxLength、Validators.pattern 等方法來添加 Validators 到表單控件中。

例如，在模板中使用 Validators.required 驗證一個輸入框：

<input type="text" formControlName="name" [ngClass]="{'is-invalid': submitted && form.controls.name.errors}">
<div *ngIf="submitted && form.controls.name.errors">
  <small *ngIf="form.controls.name.errors.required">Name is required</small>
</div>

4. 自定義 Validator： 除了使用 Validators 類提供的靜態方法外，也可以自定義 Validator。自定義 Validator 是一個函數，接受一個 FormControl 參數，返回一個對象，表示驗證結果。例如，創建一個自定義 Validator，驗證輸入的值是否為數字：

function numberValidator(control: FormControl) {
  const value = control.value;
  if (isNaN(value)) {
    return { 'notANumber': true };
  }
  return null;
}

然后在表單控件中應用該自定義 Validator：

this.form = this.fb.group({
  number: ['', [Validators.required, numberValidator]]
});

通過以上步驟，就可以創建和應用 Validators 到表單驗證中。