在我的项目中，咱们有时候往往须要动表单的验证做动静的布局。比方在一个注册界面中同步注册两种用户，但两种用户的输出项却不是雷同的。
老师的话，要求输出工号：
学生用户的话，则要求输出学号：
咱们把这种情景，称为动静的表单验证。
在上述表中校验中，咱们要求：
- 工号与学号互不烦扰。
- 抉择老师类型时，只判断工号是否曾经输出。
- 抉择学生类型时，则只判断学号是否曾经输出。
实现计划
其实这个实现的计划有很多种。在我的项目中咱们曾经应用过的大体有三种：
- 应用跨字段验证器。
- 订阅用户类型，将用户类型发生变化时，重置
工号或学号的验证规定。 - 订阅用户类型，将用户类型发生变化时，在
fromGroup中增加或移除工号,学号FromControl。
跨字段验证器
Anguar的官网给出在在跨字段验证器的应用示例，该思维是在FromGroup上增加一个验证器，而后在该验证器中获取FormControl的值，在依据具体的状况来进行验证。
长处：
- 官网示例，学习成本低。
- 间接将验证放到了验证器中，逻辑清晰。
- 验证器不会对获取
FromGroup的值产生影响。
毛病：
- 无奈在
FormControl间接定义验证条件，不直观。
重置验证规定
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是设置验证器，代码直观。
毛病：
- 在后续对
FormGroup获取相干的值的操作中，须要对FormGroup是否有值来进行判断,容易产生在undefined上调用value的谬误。（这能够应用间接获取FromControl的值的办法来躲避）。
如果你想看到具体的代码及交果，请点击：示例代码或最终成果