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

網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒(méi)有做好網(wǎng)站，給成都創(chuàng)新互聯(lián)一個(gè)展示的機(jī)會(huì)來(lái)證明自己，這并不會(huì)花費(fèi)您太多時(shí)間，或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶友好，注重用戶體驗(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;
};

解釋：這個(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)證

  
  
    成績(jī)總占比需等于100%!
    
  

效果：

總結(jié)

總的來(lái)說(shuō)這個(gè)驗(yàn)證器實(shí)現(xiàn)起來(lái)不算很難，就是讀懂官方文檔，然后根據(jù)自己的需求進(jìn)行改寫(xiě)。

參考文檔：angular表單驗(yàn)證 跨字段驗(yàn)證

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。