自訂驗證器

說明

1. 是一個function
2. 這個驗證function必須在產生FormGroup物件this.form.group()時設定
3. 驗證的function，驗證通過回傳null，驗證不通過回傳一個驗證錯誤物件
4. 驗證錯誤物件
   • 通常都包含一個屬性
   • 屬性名稱是驗證控制器的名稱
   • 屬性的值是任意值，通常是boolean，也可設成當下的值或錯誤訊息
5. 多個function可以統一寫在一個ts檔中，再匯入特定function到需要使用驗證器的元件中

程式碼寫法：

function寫法

產生FormGroup物件時設定在FormControl中

程式碼範例：

1.在src/app下新增validator.ts檔案，importAbstractControl類別

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

2.寫noContent()方法，作為檢查欄位是否空白的驗證器

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

export function noContent(input: AbstractControl) {
  let invalid = false;
  if( input.value==null || input.value == "" ){
    invalid = true;
  }
  return invalid == true? {noContent: true} : null
}

3.在```model-driven-form.component.ts'''中，將noContent驗證器設定到title欄位的FormControl中

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    title: ["預設title", [noContent]],
    name: ["預設name"],
  })
}

4.在```model-driven-form.component.html'''中製造灰色區塊顯示驗證器傳回的內容

<pre> {{form.get("title").errors | json}} </pre>

5.將頁面title欄位清空，比較灰色區塊內容