共计 2504 个字符,预计需要花费 7 分钟才能阅读完成。
在我的项目中,咱们有时候往往须要动表单的验证做动静的布局。比方在一个注册界面中同步注册两种用户,但两种用户的输出项却不是雷同的。
老师的话,要求输出工号:
学生用户的话,则要求输出学号:
咱们把这种情景,称为动静的表单验证。
在上述表中校验中,咱们要求:
- 工号与学号互不烦扰。
- 抉择老师类型时,只判断工号是否曾经输出。
- 抉择学生类型时,则只判断学号是否曾经输出。
实现计划
其实这个实现的计划有很多种。在我的项目中咱们曾经应用过的大体有三种:
- 应用跨字段验证器。
- 订阅用户类型,将用户类型发生变化时,重置
工号
或学号
的验证规定。 - 订阅用户类型,将用户类型发生变化时,在
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
的值的办法来躲避)。
如果你想看到具体的代码及交果,请点击:示例代码或最终成果
正文完