例如,我有这段代码初始化 word
验证器 minlength
6 个字符。然后当 word
的长度 >4 时,minlength
被设置为 8 个字符。
问题是,当您输入第五个字符时,更改不会立即可见,但在您输入第六个字符或删除一个或多个字符后,它是可见的。
this.registerForm = this.formBuilder.group({
word: [null, [Validators.required, Validators.minLength(6)]
}, {validator: this.validateNumber});
validateNumber(input: AbstractControl) {
if(input.get("word").value != null && input.get("word").value.length > 4) {
input.get("word").setValidators([Validators.required, Validators.minLength(8)]);
}
}
我在 plunker 上创建了这个例子.当您开始在输入框中键入内容时,minlength
出现错误,当您键入第六个字符而不是第五个字符时,它会从 6 变为 8。
最佳答案
更新字段上的验证器后,您需要更新控件及其验证。否则,验证器只会在用户对表单进行更改时再次运行。
Deborah Kurata has shown it in one of its tutorials on pluralsight.
你应该做的是:
validateNumber(input: AbstractControl) {
const wordControl = input.get("word");
if(wordControl.value != null && wordControl.value.length > 4) {
wordControl.setValidators([Validators.required, Validators.minLength(8)]);
wordControl.updateValueAndValidity();
}
}
顺便说一下,如果每次验证时都更新验证器并再次运行验证,则会出现无限循环。
关于angular - 为什么 setValidators() 在下一次更改时开始使用新的验证器,而不是立即,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47874169/