引言
在项目中，我们有时候往往需要动表单的验证做动态的规划。比如在一个注册界面中同步注册两种用户，但两种用户的输入项却不是相同的。
教师的话，要求输入工号：
学生用户的话，则要求输入学号：
我们把这种情景，称为动态的表单验证。
在上述表中校验中，我们要求：
- 工号与学号互不干扰。
- 选择教师类型时，只判断工号是否已经输入。
- 选择学生类型时，则只判断学号是否已经输入。
实现方案
其实这个实现的方案有很多种。在项目中我们已经使用过的大体有三种：
- 使用跨字段验证器。
- 订阅用户类型，将用户类型发生变化时，重置工号或学号的验证规则。
- 订阅用户类型，将用户类型发生变化时，在fromGroup中添加或移除工号,学号FromControl。
跨字段验证器
Anguar的官方给出在在跨字段验证器的使用示例，该思想是在FromGroup上添加一个验证器，然后在该验证器中获取FormControl的值，在根据具体的情况来进行验证。
优点：
- 官方示例，学习成本低。
- 直接将验证放到了验证器中，逻辑清晰。
- 验证器不会对获取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地址：源码或最终效果
总结
到此这篇关于angular表单动态验证的一种新思路的文章就介绍到这了,更多相关angular表单动态验证内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！