在项目中,我们有时候往往需要动表单的验证做动态的规划。比如在一个注册界面中同步注册两种用户,但两种用户的输入项却不是相同的。
教师的话,要求输入工号:
学生用户的话,则要求输入学号:
我们把这种情景,称为动态的表单验证。
在上述表中校验中,我们要求:
其实这个实现的方案有很多种。在项目中我们已经使用过的大体有三种:
Anguar的官方给出在在跨字段验证器的使用示例,该思想是在FromGroup上添加一个验证器,然后在该验证器中获取FormControl的值,在根据具体的情况来进行验证。
优点:
缺点:
你可以点击https://segmentfault.com/a/1190000041563611来查看实现样例。
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>
优点:
缺点:
formGroup.get('xxx')?.value
。