关于angular:angular中关于表单动态验证的一种新思路

2次阅读

共计 2504 个字符，预计需要花费 7 分钟才能阅读完成。

在我的项目中，咱们有时候往往须要动表单的验证做动静的布局。比方在一个注册界面中同步注册两种用户，但两种用户的输出项却不是雷同的。

老师的话，要求输出工号：

学生用户的话，则要求输出学号：

咱们把这种情景，称为动静的表单验证。

在上述表中校验中，咱们要求：

工号与学号互不烦扰。
抉择老师类型时，只判断工号是否曾经输出。
抉择学生类型时，则只判断学号是否曾经输出。

其实这个实现的计划有很多种。在我的项目中咱们曾经应用过的大体有三种：

应用跨字段验证器。
订阅用户类型，将用户类型发生变化时，重置 工号 或学号 的验证规定。
订阅用户类型，将用户类型发生变化时，在 fromGroup 中增加或移除 工号 , 学号FromControl。

Anguar 的官网给出在在跨字段验证器的应用示例，该思维是在 FromGroup 上增加一个验证器，而后在该验证器中获取 FormControl 的值，在依据具体的状况来进行验证。

长处：

官网示例，学习成本低。
间接将验证放到了验证器中，逻辑清晰。
验证器不会对获取 FromGroup 的值产生影响。

毛病：

无奈在 FormControl 间接定义验证条件，不直观。

FromControl提供了 clearValidators() 来清空验证器，以及 setValidators() 来设置验证器，所以咱们能够订阅用户类型是否发生变化，在发生变化时，依据状况清空穿插字段的验证器，而后再从新对其验证器进行设置。

长处：

为动静地增加异步验证器提供了一种新的思路

毛病：

验证规定不直观。
代码量大。

FromGroup提供的 removeControl() 使得咱们能够移除其中的FormControl，利用该机制咱们能够订阅用户类型发生变化后，依据状况来移除、增加相应的FormControl，从而达到动静验证表单的目标。

示例代码 C 层：

export class AppComponent implements OnInit {
  name = 'Angular' + VERSION.major;
  formGroup = new FormGroup({});
  // 学号
  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 中增加学号还是工号 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');
  }

  /**
   * 显示学号或是工号的 input
   */
  showStudent(): boolean {return this.typeFormControl.value === 1;}
}

V 层：

<hello name="{{name}}"></hello>
<p> 表单动静验证示例 </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" />
      学生 </label
    >
  </div>
  <div *ngIf="showStudent()">
    学号：<input type="text" formControlName="studentNo" />
  </div>
  <div *ngIf="!showStudent()">
    工号：<input type="text" formControlName="teacherNo" />
  </div>
  <button [disabled]="formGroup.invalid" (click)="onSubmit()">Submit</button>
</form>

长处：