关于angular表单动态验证的一种新思路分享

引言

在项目中,我们有时候往往需要动表单的验证做动态的规划。比如在一个注册界面中同步注册两种用户,但两种用户的输入项却不是相同的。

教师的话,要求输入工号:

学生用户的话,则要求输入学号:

我们把这种情景,称为动态的表单验证。

在上述表中校验中,我们要求:

  • 工号与学号互不干扰。
  • 选择教师类型时,只判断工号是否已经输入。
  • 选择学生类型时,则只判断学号是否已经输入。

实现方案

其实这个实现的方案有很多种。在项目中我们已经使用过的大体有三种:

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

跨字段验证器

优点:

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

缺点:

  • 无法在FormControl直接定义验证条件,不直观。
  • 只能统一显示错误信息,无法为单一的字段定制错误信息。

你可以点击https://segmentfault.com/a/1190000041563611来查看实现样例。

重置验证规则

FromControl提供了clearValidators()来清空验证器,以及setValidators()来设置验证器,所以我们可以订阅用户类型是否发生变化,在发生变化时,根据情况清空交叉字段的验证器,然后再重新对其验证器进行设置。

优点:

  • 为动态地添加异步验证器提供了一种新的思路

缺点:

  • 验证规则不直观。
  • 代码量大。

重置FromGroup项

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>

优点:

  • 直接在FormControl上设置验证器,代码直观。
  • 可以直接使用angular提供的ngvalid等class属性,快速定义校验结果的样式。

缺点:

  • 验证器会对获取FromGroup的值产生影响。比如在后续对FormGroup获取相关的值的操作中,需要对FormGroup是否有值来进行判断,容易产生在undefined上调用value的错误。(这可以使用?来规避 ---- formGroup.get('xxx')?.value

本文demo地址:源码最终效果

总结

作者:myskies 原文地址:https://segmentfault.com/a/1190000041562598

%s 个评论

要回复文章请先登录注册