引言
模板驅動表單相比較響應式表單可以少更少的**做同樣的事情，可也損失了自由度與更易測試，當然很多人並不在乎啦。
所以我相信很多人在編寫angular不自由自主去更傾向於模板驅動表單的寫法。
表單最核心的是校驗體驗，在angular中簡直就是發揮到了極致，比如：required、min、max、pattern 等，程式設計客棧這些原本是html dom元素中的表述，而angular預設實現了一整套的校驗指令，比如：required 對應 requiredvalidator。
然後很多時候我們需要一些特殊的校驗，比如：資料比較、遠端校驗等。那在模板驅動表單風格中我們要如何優雅的實現這樣乙個校驗器呢？
一、angular是如何校驗？
一般在編寫乙個手機文字框可能是這樣：
手機號必填
手機號格式不正確
以上幾行很友好的實現從必填項、格式進行校驗，而這一切都是依靠 [(ngmodel)] 統一採集，得以只需要利用乙個模板引用變數訪問到每個校驗指令的錯誤資訊。
1、[(ngmodel)] 到底做了什麼？
在解析這個問題前需要先了解一下 requiredvalidator 是如何定義的。
@directive(]
})export class requiredvalidator {}
只看最核心向 ng_validators 識別符號註冊乙個 requiredvalidator 指令。這樣就可以使 ngmodel 指令中注入 ng_validators 後就能得到這個指令物件。
ngmodel 我把它簡化了一下：
export class ngmodel extends ngcontrol
get validator(): validatorfn|null
}有關更多ng_model.ts可以深入閱讀源**。
angular會在每一次表單值變更時，對所有的表單中已經安裝的校驗器進行一次遍歷。
二、編寫乙個校驗器
誠如 required 校驗器一樣，依然是把自定義校驗器掛到 ng_validators 當中。假如我們希望手機文字框只能輸入 159 開頭的乙個校驗器。
定義directive
@directive(]
})export class usermobiledirective {}
乙個非常普通的指令定義方法，只是多了乙個將 usermobiledirective 註冊到 ng_validators 識別符號當中而已。別問我為什麼，一種約定。
類export class usermobiledirective implements validator };}
return null;
}}只需要實現 validator 介面的 validate 方法即可。
從 c 中獲取dom值，當遇到非 159 開頭時，返回乙個用於表述訊息的物件即可，否則返回乙個 null。這個物件會被統一採集在 ngmodel.errors 物件下面。故而，只需要在dom元素加上 user-mobile 指令即可。
手機號必填
}介面還包括乙個 registeronvalidatorchange 可選方法，當某些其它外部屬性的變更時，允許重新手動觸發校驗。
三、非同步校驗器
如果說使用者手機校驗器需要檢查手機是否為黑名單的情況下，正常黑名單資料都存在遠端當中。這樣情況下需要傳送http請求，而這一過程就是非同步。
angular針對這類非同步校驗有獨立的另乙個識別符號，即：ng_async_validators，而其它**都是相通的。
@directive(]
})export class userasyncdirective implements validator }}
return null;
}).first();
}}除了 ng_async_validators 核心的結構完全沒有變動。
而對於 validate 方法返回的是乙個 observable 型別，利用對 valuechanges 的訂閱可以製作一些像去抖動作。
而最後必須使用 first() 做為結尾，原因每一次校驗，對於結果而言只允許乙個。
結論本章介紹的是如何對模板驅動表單建立自xkrxkm定義校驗器，它相比較響應式表單自定義校驗器略為複雜一些。但是實際運用中，我們不應該只為某個構建表單風格做一種自定義校驗器，應該二者是共存的。
比如上面 159 開頭的示例。更合理的編寫方式應該是將校驗邏輯獨立：
export class myvalidators } : null;
}}// 校驗器類
export class usermobiledirective implements validator
}這樣，同乙個校驗器，不管xkrxkm是模板驅動表單還是響應式表單，都能是通用的。
總結本文標題: angular在模板驅動表單中自定義校驗器的方法
本文位址:
angular2 模板驅動型表單
要使用模板驅動型表單，我們必須先導入formsmodule模組。ngmodule template.component.html template.component.ts import from angular core component export class templatecompone...
Angular 模板式表單和響應式表單
1.模板式表單和響應式表單的不同點 1 不管是模板式表單還是響應式表單，都有乙個對應的資料模型來儲存表單中的資料。在模板式表單中，資料模型是通過元件模板中的相關指令來定義的 而在響應式表單中，我們需要通過編寫 typescript 來建立乙個資料模型，然後使用一些特定的指令，將模板上的html元素與...
表單必填 模板驅動表單Agnular高階程式設計（5）
angular表單分為模板驅動表單和響應式表單。模板驅動表單採用ngmodel對模板控制項和元件變數進行繫結，適用於格式固定的表單。響應式表單使用formgroup,formcontrol，formarray,formbuilder 等類構建出資料物件，資料來源操作和表單驗證在元件邏輯中進行，適合格...