關(guān)于angular表單動態(tài)驗證的一種新思路分享

更新時間：2022年03月24日 10:36:10 作者：myskies

在Angular?中不管是模板驅(qū)動表單還是響應(yīng)式表單,對于動態(tài)創(chuàng)建表單的支持都很好,下面這篇文章主要給大家介紹了關(guān)于angular表單動態(tài)驗證的一種新思路,需要的朋友可以參考下

引言

在項目中，我們有時候往往需要動表單的驗證做動態(tài)的規(guī)劃。比如在一個注冊界面中同步注冊兩種用戶，但兩種用戶的輸入項卻不是相同的。

教師的話，要求輸入工號：

學(xué)生用戶的話，則要求輸入學(xué)號：

我們把這種情景，稱為動態(tài)的表單驗證。

在上述表中校驗中，我們要求：

工號與學(xué)號互不干擾。
選擇教師類型時，只判斷工號是否已經(jīng)輸入。
選擇學(xué)生類型時，則只判斷學(xué)號是否已經(jīng)輸入。

實現(xiàn)方案

其實這個實現(xiàn)的方案有很多種。在項目中我們已經(jīng)使用過的大體有三種：

使用跨字段驗證器。
訂閱用戶類型，將用戶類型發(fā)生變化時，重置工號或?qū)W號的驗證規(guī)則。
訂閱用戶類型，將用戶類型發(fā)生變化時，在fromGroup中添加或移除工號,學(xué)號FromControl。

跨字段驗證器

Anguar的官方給出在在跨字段驗證器的使用示例，該思想是在FromGroup上添加一個驗證器，然后在該驗證器中獲取FormControl的值，在根據(jù)具體的情況來進(jìn)行驗證。

優(yōu)點：

官方示例，學(xué)習(xí)成本低。
直接將驗證放到了驗證器中，邏輯清晰。
驗證器不會對獲取FromGroup的值產(chǎn)生影響。

缺點：

無法在FormControl直接定義驗證條件，不直觀。
只能統(tǒng)一顯示錯誤信息，無法為單一的字段定制錯誤信息。

你可以點擊https://segmentfault.com/a/1190000041563611來查看實現(xiàn)樣例。

重置驗證規(guī)則

FromControl提供了clearValidators()來清空驗證器，以及setValidators()來設(shè)置驗證器，所以我們可以訂閱用戶類型是否發(fā)生變化，在發(fā)生變化時，根據(jù)情況清空交叉字段的驗證器，然后再重新對其驗證器進(jìn)行設(shè)置。

優(yōu)點：

為動態(tài)地添加異步驗證器提供了一種新的思路

缺點：

驗證規(guī)則不直觀。
代碼量大。

重置FromGroup項

FromGroup提供的removeControl()使得我們可以移除其中的FormControl，利用該機制我們可以訂閱用戶類型發(fā)生變化后，根據(jù)情況來移除、添加相應(yīng)的FormControl，從而達(dá)到動態(tài)驗證表單的目的。

示例代碼 C 層：

export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  formGroup = new FormGroup({});
  // 學(xué)號
  studentNoFormControl = new FormControl(null, Validators.required);
  // 工號
  teachterNoFormControl = new FormControl(null, Validators.required);
  // 用戶類型
  typeFormControl = new FormControl(null, Validators.required);
  ngOnInit(): void {
    this.formGroup.addControl('name', new FormControl('', Validators.required));
    this.formGroup.addControl('type', this.typeFormControl);

    // 訂閱類型的變化，從而決定在formGroup中添加學(xué)號還是工號FormControl
    this.typeFormControl.valueChanges.subscribe((type) => {
      if (type === 0) {
        this.formGroup.removeControl('studentNo');
        this.formGroup.addControl('teacherNo', this.teachterNoFormControl);
      } else {
        this.formGroup.removeControl('teacherNo');
        this.formGroup.addControl('studentNo', this.studentNoFormControl);
      }
    });

    // 初始化用戶類型為教師
    this.typeFormControl.setValue(0);
  }

  onSubmit(): void {
    alert('submit');
  }

  /**
   * 顯示學(xué)號或是工號的input
   */
  showStudent(): boolean {
    return this.typeFormControl.value === 1;
  }
}

V 層：

<hello name="{{ name }}"></hello>
<p>表單動態(tài)驗證示例</p>
<pre>{{ formGroup.invalid | json }}</pre>
<pre>{{ formGroup.get('type').value | json }}</pre>
<form [formGroup]="formGroup">
  <div>姓名：<input type="text" formControlName="name" /></div>
  <div>
    用戶類型:
    <label
      ><input type="radio" [value]="0" formControlName="type" name="type" />
      教師</label
    >
    <label
      ><input type="radio" [value]="1" formControlName="type" name="type" />
      學(xué)生</label
    >
  </div>
  <div *ngIf="showStudent()">
    學(xué)號：<input type="text" formControlName="studentNo" />
  </div>
  <div *ngIf="!showStudent()">
    工號：<input type="text" formControlName="teacherNo" />
  </div>
  <button [disabled]="formGroup.invalid" (click)="onSubmit()">Submit</button>
</form>

優(yōu)點：

直接在FormControl上設(shè)置驗證器，代碼直觀。
可以直接使用angular提供的ngvalid等class屬性，快速定義校驗結(jié)果的樣式。

缺點：

驗證器會對獲取FromGroup的值產(chǎn)生影響。比如在后續(xù)對FormGroup獲取相關(guān)的值的操作中，需要對FormGroup是否有值來進(jìn)行判斷,容易產(chǎn)生在undefined上調(diào)用value的錯誤。（這可以使用?來規(guī)避 ---- formGroup.get('xxx')?.value。

本文demo地址：源碼或最終效果