前幾天有人在論壇問了一個自訂表單非同步驗證的問題,這問題是當一個自訂表單物件內有非同步驗證時,外部使用者無法正確地取得該表單物件的驗證狀態,這問題我一開始想說應該不難,但也花了我快一天的時間才釐清要怎麼寫一個具有非同步驗證的自訂表單物件,方法如下
同步驗證
我們都知道 Angular FormControl
的驗證有分同步與分同步兩種方式,下面是同步驗證的寫法
1 | ({ |
分同步驗證
非同步驗證在 FormControl
的驗證狀態是 PENDING
<–> VALID/INVALID
間切換,由於非同步與同步要實作的方法都是同一個,所以當非同步與同步驗證同時存在時,要以非同步為準,不然整個驗證都只會取得同步驗證的
1 | ({ |
一旦註冊成 NG_ASYNC_VALIDATORS
時,外部使用這一個自訂 FormControl
的 status 就會處在 PENDING
,而其原因是因為 validate
的方法沒有回傳一個完成的訊號,基於這一個理由,我們需要調整 validate
的實作方式
1 | validate() { |
完整程式碼如下
1 | import { Component, OnInit } from "@angular/core"; |