本文主要給大家介紹如何判斷驗證器的結果。在這里，我們就來看看怎樣實現(xiàn)一個自定義的驗證器。

目標

我們要實現(xiàn)一個驗證手機號的驗證器，使用的實例還是基于之前的文章里面的實例，也就是用戶信息輸入的表單頁面。我們在手機號的元素上添加一個驗證手機號的驗證器。然后，如果手機號驗證失敗，就顯示一個錯誤，頁面如下：

這部分教程的代碼可以從github獲取:

git clone

https://github.com/Mavlarn/angular2-forms-tutorial

如果要運行，進入項目目錄，運行下面的命令安裝依賴然后運行測試服務器：

cd angular2-forms-tutorial
git checkout model-driven # 檢出該文所使用的tag
npm install
npm start

實現(xiàn)驗證器

在Angular2中，實現(xiàn)一個驗證器非常簡單，就是一個方法就可以，該方法的參數(shù)是一個FormControl，結果是一個錯誤對象或者null。用TypeScript接口表示，就是這樣：

interface Validator<T extends FormControl> {
(c:T): {[error: string]:any};
}

如果是對類似Java這樣的面向對象語言比較了解的話，上面的接口定義就很容易理解。其中<T extends FormControl>是指這個方法中用到一個泛型T，它是一個繼承自FormControl的對象。(c:T): {[error: string]:any};這是一個lambda表達式的方法定義，參數(shù)c的類型為T，這個方法返回一個對象。

我們創(chuàng)建一個名為mobile.validator.ts的文件，它的內容如下：

import { FormControl } from '@angular/forms';
export function validateMobile(c: FormControl) {
let MOBILE_REGEXP = /^1[0-9]{10,10}$/;
return MOBILE_REGEXP.test(c.value) ? null : {
validateMobile: {valid: false}
}
}

在這個驗證方法里，參數(shù)c的類型為FormControl，也就是表單控件，他有一個value屬性，存放當前的值。我們使用正則表達式，來判斷這個值是否合法。如果不合法，就返回一個對象。
在之前的教程中，我們對驗證器的驗證結果是這樣獲得的：

<p *ngIf="userForm.controls.mobile?.errors?.required">必須輸入電話</p>

userForm.controls.mobile就是表單中手機號這個控件，required是required驗證器對應的key，當required驗證器驗證失敗時，就會在errors里面添加一個值：

{
required: {valid: false}
}

所以，我們實現(xiàn)的自定義的驗證器，也要把驗證結果用驗證器的名字作為key，放到errors里面，就是這樣：

{
validateMobile: {valid: false}
}

這樣，我們就能夠在頁面中用跟之前同樣的方式來獲得這個驗證器的驗證結果。

在模型驅動的表單里添加驗證器

接下來，我們把我們實現(xiàn)的驗證器添加到我們的表單里，先加到模型驅動的表單里：

import { validateMobile } from '../validators/mobile.validator';
export class ReactiveFormsComponent implements OnInit {
this.userForm = this.formBuilder.group({
// ... 省略其他控件
mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]]
});
...
}

上面的代碼省略了其他的部分，完整的代碼，請參考github。

在上面的代碼中，我們引入了之前實現(xiàn)的自定義的驗證器，然后在表單控件創(chuàng)建代碼中，對mobile控件加了一個validateMobile。

這樣，我們在頁面上添加相應的驗證結果信息：

<p *ngIf="userForm.controls.mobile.errors?.validateMobile">電話號碼格式不正確</p>

這樣就完成了驗證器，以及在頁面顯示驗證結果，就這么簡單。

在模板驅動的表單里添加驗證器

但是，如果我們的表單不是在組件里用模型驅動的方式創(chuàng)建的，而是在頁面上用html元素創(chuàng)建的，那么使用自定義的驗證器就稍微麻煩一點。

在一個模板驅動的表單里，我們是這樣使用驗證器的：

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11">
<span *ngIf="mobile.valid">有效</span>
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">電話長度必須為11</p>
<p *ngIf="mobile.errors?.required">必須輸入姓名</p>
</div>

也就是在input輸入元素的屬性中添加驗證器。那么，我們要實現(xiàn)自己的驗證器在表單里面使用，除了上面的驗證器方法里面，還需要2件事情：

我們需要將這個驗證器定義成一個指令Directive，這樣Angular在解析這段html的時候，會識別我們自定義的驗證器指令。
我們還需要Angular的驗證器調用我們的驗證方法。
所以，在之前的mobile.validator.ts文件里，添加下面的指令定義：

@Directive({
selector: '[validateMobile][ngModel]'
})
export class MobileValidator {}

這段代碼很簡單，就是用@Directive標簽定義了一個指令MobileValidator，它作用的元素是同時具有validateMobile和ngModel屬性的元素。這樣，我們就可以在手機號的元素上添加一個屬性，來使這個驗證器指令起作用。
然后，我們還需要Angular的驗證器框架能夠調用我們的驗證方法，這就需要NG_VALIDATORS。我們修改上面的驗證器的指令定義如下：

@Directive({
selector: '[validateMobile][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useValue: validateMobile, multi: true }
]
})
export class MobileValidator {}

這樣Angular的驗證器就能夠將validateMobile方法應用在這個指令上。

最后，我們再把這個新的指令，添加到AppModule的declarations里面，就可以在頁面上使用這個驗證器了。

最后，頁面上使用驗證器的代碼如下：

<input type="text" name="mobile" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11" validateMobile>
<span *ngIf="mobile.valid">有效</span>
<div [hidden]="mobile.valid || mobile.pristine">
<p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">電話長度必須為11</p>
<p *ngIf="mobile.errors?.required">必須輸入姓名</p>
<p *ngIf="mobile.errors?.validateMobile">電話號碼格式不正確</p>
</div>

以上所述是小編給大家介紹的Angular2表單自定義驗證器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論