這次帶給大家Reactive Form的自訂驗證器，使用Reactive Form的自訂驗證器的注意事項有哪些，下面就是實戰案例，一起來看一下。
本文將介紹Angular（Angular2+）中Reactive Form的有關內容，包括：
Reactive Form創建方法
如何使用驗證
自訂驗證器
#下面開始進入正文！
首先我們需要使用FormBuilder建立一個FormGroup，就像這樣：
registerForm: FormGroup;
constructor(
private fb: FormBuilder,
) {}
ngOnInit() {
this.registerForm = this.fb.group({
firstName: [''],
lastName: [''],
})
}上面的firstName和lastName 是由你自己取的，分別表示一個表單控制項名稱。
然後HTML頁面就像這樣：
這樣就建立了一個非常簡單的表單！
表單的輸入項目經常是要進行驗證的，那該怎麼驗證呢？
其實很簡單，Angular已經為我們寫好了一些常用的驗證器，就像這樣使用就可以了：
ngOnInit() {
this.registerForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.pattern('[A-Za-z0-9]*')],
})
}可以使用「必要」驗證器，也可以使用正則，你只需傳入一個正規表示式就可以了。除此之外，還有minLength和maxLength等。
如果一個控制項需要多個驗證器，可以把它們放在一個陣列裡面：
lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]]如果你希望在輸入時得到一些提示，可以這樣寫你的HTML：
第一個控件，在你「touch」過又為空的情況下會給出提示；第二個控件，在輸入不符合正規表示式規則的情況下給出提示，hasError方法還可以傳入required、minLength等參數，分別對應不同的驗證器；最後，在輸入還未符合規則的時候，Submit按鈕是處於停用的狀態。
Angular提供的幾個驗證器在實際專案中往往是不夠用的，因此我們需要自訂驗證器，以滿足我們的業務需求！
驗證器其實就是一個有著return的方法！
現在我們來寫一個驗證器，驗證一個網址輸入框的值是否符合規則：
export function validateUrl(control: AbstractControl){
if(control.value){
if(!control.value.startsWith('www') || !control.value.includes('.io')){
return {
inValidUrl: true
}
}
}
return null;
}我們測試輸入值是否以“www”開頭，並且包含“.io”。然後使用方法跟Angular提供的驗證器一樣：
this.registerForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]],
website: ['', validateUrl], // <---
})然後，你可以這樣寫你的HTML，以便適當的時候得到提示：
Url must starts with www and includes .io
#OK，今天的內容就到這裡。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Reactive Form的自訂驗證器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
