快捷導(dǎo)航

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

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

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

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

angular內(nèi)置驗(yàn)證器

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

需求：設(shè)置成績(jī)占比時(shí)，如果總占比不是100%，則無(wú)法通過(guò)驗(yàn)證。

分析：需求很簡(jiǎn)單，只需要寫(xiě)一個(gè)驗(yàn)證器即可，由于不需要訪問(wèn)后臺(tái)，且驗(yàn)證器與三個(gè)字段有關(guān)，所以是同步跨字段驗(yàn)證。

實(shí)現(xiàn)驗(yà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;
};

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

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

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

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

到此，驗(yàn)證器已經(jīng)寫(xiě)完。

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

給要驗(yàn)證的 FormGroup 添加驗(yàn)證器，就要在創(chuàng)建時(shí)把一個(gè)新的驗(yàn)證器傳給它的第二個(gè)參數(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});
}

添加錯(cuò)誤提示信息

我使用的是ng-zorro框架，當(dāng)三個(gè)成績(jī)占比均輸入時(shí)，觸發(fā)驗(yàn)證

  <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">成績(jī)總占比需等于100%!
    </nz-form-explain>
  </nz-form-control>
</nz-form-item>

效果：