angular - 角度6反应形式FormGroup验证
问题描述
尝试根据某些条件添加验证器。当条件为真时,我添加必需的验证器并在它为假时将其删除。
createReactiveForm(data: any) {
const formGroup = new FormGroup({
'control1': new FormControl(data.key1),
'control2': new FormControl(data.key2)
}, this.formValidators.bind(this)),
}
formValidators(formGroup: FormGroup){
const control1Val: boolean = formGroup.controls['control1'].value;
if (control1Val) {
const control2: AbstractControl = formGroup.controls['control2'];
constrol2.setValidators(Validators.required);
} else {
const control2: AbstractControl = formGroup.controls['control2'];
constrol2.setValidators(() => null);
}
}
formValidators() 方法被无限次调用 - 我在这里是否做错了什么?
当条件为真时,它正在添加验证器并显示错误。但是当条件为假时,验证器被删除,但控件上的错误仍然存在 - 原因是什么?
在formGroup中绑定方法formValidators()是一种好方法吗?
帮我解决这个问题。
解决方案
- 不,它要求每个更改检测周期/控制更改。
- 打电话
control.setErrors(null)
。 - 第二个参数需要一个函数。您的代码没有问题。
Validator 函数应该返回一个错误对象或null。我不建议将您的逻辑放在验证器函数中,因为它不是正确的位置。您可以收听 control1valueChanges
并将逻辑移至那里。这样,您将优化代码以仅在 control1 值更改时运行。
推荐阅读
- php - Docker php 镜像在 macos 上寻找 windows 路径
- android - 我可以在本机反应中使用 .jks 文件而不是 .keystore 文件吗?
- javascript - 使用已保存卡的令牌和 3d 安全创建付款
- node.js - 如何自定义 node js lib 并将其包含在项目中
- xamarin - Xamarin 自定义 ScrollView 的行为不像默认 Scrollview
- twincat - TwinCAT3 中的条件编译指示
- java - 如何以干净的方式创建由 ForeignKey 与 RoomDB 相关的行和子项?
- azure-data-explorer - 使用 Loop 进行 Kusto 计算
- python - AWS ActiveMQ 从消费者获取消息并发送到队列
- flutter - 在扩展类中颤动 fromMap 和 toMap