我有一个FormGroup
看起来像这样:
this.complaint = new FormGroup({
date: new FormControl(null, Validators.required),
isRangeDate: new FormControl(false, Validators.required),
untilDate: new FormControl(null, rangeDateValidator()),
});
我有这个自定义验证器rangeDateValidator
function rangeDateValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
console.log(control?.parent?.get('isRangeDate')?.value)
return control?.parent?.get('isRangeDate')?.value ? {required: true} : null;
}
}
基本上检查用户是否选择输入范围日期,如果是-它的更改untilDate
控件是必需的。这个东西只在第一次工作-默认情况下isRangeDate
是false
,所以没有required
验证添加到控件,当它更改为true时,它将required
添加到控件,但只有一次-当我将其更改回isRangeDate: false
时,所需的验证仍然附加到它上,我可以在控制台看到验证器函数没有调用,甚至FormGroup
也被更改了。
有什么想法吗?
3条答案
按热度按时间niknxzdl1#
它不会调用你的自定义验证器,因为你正在更改
isRangeDate
表单而不是untilDate
表单,你只会将自定义验证器分配给untilDate
表单。也许你可以在改变isRangeDate
的形式后调用一个函数:myForm.markAllAsTouched()
或myForm.valid()
。我认为这应该重新验证表单并调用自定义验证器。v8wbuo2f2#
我认为这是因为当你在输入框中手动添加false时,它被当作一个字符串而不是布尔值,所以也许这就是为什么验证对象没有被添加到untilDate中的原因。
6xfqseft3#
我终于找到了答案:
rangeDateValidator
验证器没有第二次触发的原因是这个验证器是附加到untilDate FormControl
的,所以它只在untilDate
值被改变时触发,而这并没有发生,因为唯一的改变的字段只有isRangeDate
字段,所以验证器函数没有调用。所以,答案是在
FormGroup
级别上添加一个自定义验证器(不特定于FormControl
),请查看此服务:这样,验证器函数
groupValidator
在FormGroup
中的每个更改时都会被触发,并且可以从那里添加或删除验证器希望有帮助:)