自定義驗證

內(nèi)建的驗證器對于兩個密碼比較的這種驗證是不夠的，那么這就需要我們自己定義一個驗證器。對于響應(yīng)式表單來說，會比較簡單一些，但對于模版驅(qū)動的表單，這需要我們實現(xiàn)一個指令來使這個驗證器更通用和更一致。因為我們希望實現(xiàn)的樣子應(yīng)該是和 required 、 minlength 等差不多的形式，比如下面這個樣子 validateEqual="repeat"

 
  密碼
  
 
 
  確認(rèn)密碼
  
 
 

那么要實現(xiàn)這種形式的驗證的話，我們需要建立一個指令，而且這個指令應(yīng)該實現(xiàn) Validator 接口。一個基礎(chǔ)的框架如下：

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
@Directive({
 selector: '[validateEqual][ngModel]',
 providers: [
 { 
  provide: NG_VALIDATORS, 
  useExisting: forwardRef(()=>RepeatValidatorDirective), 
  multi: true 
 }
 ]
})
export class RepeatValidatorDirective implements Validator{
 constructor() { }
 validate(c: AbstractControl): { [key: string]: any } {
 return null;
 }
}

我們還沒有開始正式的寫驗證邏輯，但上面的框架已經(jīng)出現(xiàn)了幾個有意思的點(diǎn)：

1.Validator 接口要求必須實現(xiàn)的一個方法是 validate(c: AbstractControl): ValidationErrors | null; 。這個也就是我們前面提到的驗證正確返回 null 否則返回一個對象，雖然沒有嚴(yán)格的約束，但其 key 一般用于表示這個驗證器的名字或者驗證的規(guī)則名字，value 一般是失敗的原因或驗證結(jié)果。

2.和組件類似，指令也有 selector 這個元數(shù)據(jù)，用于選擇那個元素應(yīng)用該指令，那么我們這里除了要求 DOM 元素應(yīng)用 validateEqual 之外，還需要它是一個 ngModel 元素，這樣它才是一個 FormControl，我們在 validate 的時候才是合法的。

3.那么那個 providers 里面那些面目可憎的家伙又是干什么的呢？ Angular 對于在一個 FormControl 上執(zhí)行驗證器有一個內(nèi)部機(jī)制： Angular 維護(hù)一個令牌為 NG_VALIDATORS 的 multi provider （簡單來說，Angular 為一個單一令牌注入多個值的這種形式叫 multi provider ）。所有的內(nèi)建驗證器都是加到這個 NG_VALIDATORS 的令牌上的，因此在做驗證時，Angular 是注入了 NG_VALIDATORS 的依賴，也就是所有的驗證器，然后一個個的按順序執(zhí)行。因此我們這里也把自己加到這個 NG_VALIDATORS 中去。

4.但如果我們直接寫成 useExisting: RepeatValidatorDirective 會出現(xiàn)一個問題， RepeatValidatorDirective 還沒有生成，你怎么能在元數(shù)據(jù)中使用呢？這就需要使用 forwardRef 來解決這個問題，它接受一個返回一個類的函數(shù)作為參數(shù)，但這個函數(shù)不會立即被調(diào)用，而是在該類聲明后被調(diào)用，也就避免了 undefined 的狀況。

下面我們就來實現(xiàn)這個驗證邏輯，由于密碼和確認(rèn)密碼有主從關(guān)系，并非完全的平行關(guān)系。也就是說，密碼是一個基準(zhǔn)對比對象，當(dāng)密碼改變時，我們不應(yīng)該提示密碼和確認(rèn)密碼不符，而是應(yīng)該將錯誤放在確認(rèn)密碼中。所以我們給出另一個屬性 reverse 。

export class RepeatValidatorDirective implements Validator{
 constructor(
 @Attribute('validateEqual') public validateEqual: string,
 @Attribute('reverse') public reverse: string) { }
 private get isReverse() {
 if (!this.reverse) return false;
 return this.reverse === 'true' ? true: false;
 }
 validate(c: AbstractControl): { [key: string]: any } {
 // 控件自身值
 let self = c.value;
 // 要對比的值，也就是在 validateEqual=“ctrlname” 的那個控件的值
 let target = c.root.get(this.validateEqual);
 // 不反向查詢且值不相等
 if (target && self !== target.value && !this.isReverse) {
  return {
  validateEqual: true
  }
 }
 // 反向查詢且值相等
 if (target && self === target.value && this.isReverse) {
  delete target.errors['validateEqual'];
  if (!Object.keys(target.errors).length) target.setErrors(null);
 }
 // 反向查詢且值不相等
 if (target && self !== target.value && this.isReverse) {
  target.setErrors({
   validateEqual: true
  })
 }
 return null;
 }
}

這樣改造后，我們的模版文件中對于密碼和確認(rèn)密碼的驗證器如下：

完成后的驗證錯誤提示

表單的提交

表單的提交比較簡單，綁定表單的 ngSubmit 事件即可

但需要注意的一點(diǎn)是，button如果不指定類型的話，會被當(dāng)做 type="submit" ，所以當(dāng)按鈕不是進(jìn)行提交表單的話，需要顯式指定 type="button" 。而且如果遇到點(diǎn)擊提交按鈕頁面刷新的情況的話，意味著默認(rèn)的表單提交事件引起了瀏覽器的刷新，這種時候需要阻止事件冒泡。

onSubmit({value, valid}, event: Event){ 
 if(valid){
 console.log(value);
 }
 event.preventDefault();
}

以上是“Angular 2+表單之模板驅(qū)動型表單的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！