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

目標(biāo)

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

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

git clone

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

如果要運(yùn)行，進(jìn)入項(xiàng)目目錄，運(yùn)行下面的命令安裝依賴然后運(yùn)行測試服務(wù)器：

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

實(shí)現(xiàn)驗(yàn)證器

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

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

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

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

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}
}
}

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

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

userForm.controls.mobile就是表單中手機(jī)號這個控件，required是required驗(yàn)證器對應(yīng)的key，當(dāng)required驗(yàn)證器驗(yàn)證失敗時，就會在errors里面添加一個值：

{
required: {valid: false}
}

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

{
validateMobile: {valid: false}
}

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

在模型驅(qū)動的表單里添加驗(yàn)證器

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

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。

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

這樣，我們在頁面上添加相應(yīng)的驗(yàn)證結(jié)果信息：

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

這樣就完成了驗(yàn)證器，以及在頁面顯示驗(yàn)證結(jié)果，就這么簡單。

在模板驅(qū)動的表單里添加驗(yàn)證器

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

在一個模板驅(qū)動的表單里，我們是這樣使用驗(yàn)證器的：

<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輸入元素的屬性中添加驗(yàn)證器。那么，我們要實(shí)現(xiàn)自己的驗(yàn)證器在表單里面使用，除了上面的驗(yàn)證器方法里面，還需要2件事情：

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

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

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

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

這樣Angular的驗(yàn)證器就能夠?qū)alidateMobile方法應(yīng)用在這個指令上。

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

最后，頁面上使用驗(yàn)證器的代碼如下：

<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表單自定義驗(yàn)證器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論