angular 實現同步驗證器跨字段驗證

需求：設置成績佔比時，若是總佔比不是100%，則沒法經過驗證。

分析：需求很簡單，只須要寫一個驗證器便可，因爲不須要訪問後臺，且驗證器與三個字段有關，因此是同步跨字段驗證。

實現驗證器

首先，去官網上找示例代碼：

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

解釋：這個身份驗證器實現了 ValidatorFn 接口。它接收一個 Angular 表單控件對象做爲參數，當表單有效時，它返回一個 null，不然返回 ValidationErrors 對象。

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

明白了這個原理，就是根據需求進行改寫：

// 判斷總佔比是否等於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};
};

到此，驗證器已經寫完。

添加到響應式表單

給要驗證的 FormGroup 添加驗證器，就要在建立時把一個新的驗證器傳給它的第二個參數。

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框架，當三個成績佔比均輸入時，觸發驗證

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

效果：

總結

總的來講這個驗證器實現起來不算很難，就是讀懂官方文檔，而後根據本身的需求進行改寫。

參考文檔：angular表單驗證 跨字段驗證