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

Question

例如，我有这段代码初始化 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。

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

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