为什么 setValidators() 在下一次更改时开始使用新的验证器，而不是立即

Question

例如，我有这段代码用 minlength 6 个字符的验证器初始化 word。然后当 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。

Answer 1

更新字段上的验证器后，您需要更新控件及其验证。否则，验证器只会运行再次验证用户将对表单所做的更改。

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();
  }
}

顺便说一下，如果每次验证时都更新验证器，然后运行再次验证，就会出现无限循环。

为什么 setValidators() 在下一次更改时开始使用新的验证器，而不是立即

Why setValidators() start using new validators on next change and not right away

validation

angular

angular5