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

Question

例如，我有这个代码，它word用minlength6 个字符的验证器初始化。然后当长度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 在其关于复数视觉的教程之一中展示了它。

你应该做的是：

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

顺便说一句，如果每次验证时都更新验证器并再次运行验证，则会出现无限循环。