angular 實現(xiàn)同步驗證器跨字段驗證的方法

更新時間：2019年04月11日 09:12:28 作者：陳杰

幾乎每個web應(yīng)用都會用到表單，那么驗證器就是必不可少的東西，這篇文章主要介紹了angular 實現(xiàn)同步驗證器跨字段驗證的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

幾乎每個web應(yīng)用都會用到表單，Angular 為我們提供了幾個內(nèi)置 validators (驗證器)，但在實際工作中為了滿足項目需求，我們經(jīng)常需要為應(yīng)用添加一些自定義驗證功能。

angular內(nèi)置驗證器

required - 表單控件值非空
email - 表單控件值的格式是 email
minlength - 表單控件值的最小長度
maxlength - 表單控件值的最大長度
pattern - 表單控件的值需匹配 pattern 對應(yīng)的模式（正則表達(dá)式）

需求：設(shè)置成績占比時，如果總占比不是100%，則無法通過驗證。

分析：需求很簡單，只需要寫一個驗證器即可，由于不需要訪問后臺，且驗證器與三個字段有關(guān)，所以是同步跨字段驗證。

實現(xiàn)驗證器

首先，去官網(wǎng)上找示例代碼：

export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
 const name = control.get('name');
 const alterEgo = control.get('alterEgo');

 return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
};

解釋：這個身份驗證器實現(xiàn)了 ValidatorFn 接口。它接收一個 Angular 表單控件對象作為參數(shù)，當(dāng)表單有效時，它返回一個 null，否則返回 ValidationErrors 對象。

從上可知，所謂跨字段，就是從驗證表單單個控件formControl變成了驗證整個表單formGroup了，而formGroup的每個字段就是formControl。

明白了這個原理，就是根據(jù)需求進(jìn)行改寫：

  // 判斷總占比是否等于100
  export const scoreWeightSumValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
  const sumLegal = formGroup.get('finalScoreWeight')
    .value + formGroup.get('middleScoreWeight')
    .value + formGroup.get('usualScoreWeight')
    .value === 100;
    // 如果是，返回一個 null，否則返回 ValidationErrors 對象。
  return sumLegal ? null : {'scoreWeightSum': true};
};

到此，驗證器已經(jīng)寫完。

添加到響應(yīng)式表單

給要驗證的 FormGroup 添加驗證器，就要在創(chuàng)建時把一個新的驗證器傳給它的第二個參數(shù)。

  ngOnInit(): void {
  this.scoreSettingAddFrom = this.fb.group({
    finalScoreWeight: [null, [Validators.required, scoreWeightValidator]],
    fullScore: [null, [Validators.required]],
    middleScoreWeight: [null, [Validators.required, scoreWeightValidator]],
    name: [null, [Validators.required]],
    passScore: [null, [Validators.required]],
    priority: [null, [Validators.required]],
    usualScoreWeight: [null, [Validators.required, scoreWeightValidator]],
  }, {validators: scoreWeightSumValidator});
}

添加錯誤提示信息

我使用的是ng-zorro框架，當(dāng)三個成績占比均輸入時，觸發(fā)驗證

  <nz-form-item nz-row>
  <nz-form-control nzValidateStatus="error" nzSpan="12" nzOffset="6">
    <nz-form-explain
      *ngIf="scoreSettingAddFrom.errors?.scoreWeightSum &&
       scoreSettingAddFrom.get('middleScoreWeight').dirty &&
       scoreSettingAddFrom.get('finalScoreWeight').dirty &&
       scoreSettingAddFrom.get('usualScoreWeight').dirty">成績總占比需等于100%!
    </nz-form-explain>
  </nz-form-control>
</nz-form-item>

效果：