响应式表单上的角度验证应在为空时打开或关闭，但在输入为空时不切换

Question

我使用 Angular Reactive Forms 构建了一个简单的表单。我有一个自定义 Validator 函数，它检查电话号码输入的格式。如果用户选择不输入电话号码，我想允许空输入，但如果他们输入电话号码，则验证他们的输入。

为了实现这一点，我订阅了表单控件上的值更改，并使用该setValidators方法在字段是否为空时切换验证：

phoneControl.valueChanges.subscribe(() => {

  if (phoneControl.value === "") {

    phoneControl.setValidators(null);

  } else {

    phoneControl.setValidators(this.phoneValidator());

  }

});

该代码最初有效，form.valid是真实的。当我输入一个数字时，它会打开验证，然后根据我的 RegEx 成功验证它并显示错误。

但是，当我清空该字段时，错误不会消失并且表单仍然无效，即使我的代码应该将验证器设置为null. 您可以在上面的 StackBlitz 示例中看到这一点。

我不明白为什么会这样。有任何想法吗？

Answer 1

动态设置验证器时，我们需要调用updateValueAndValidity(). 还记得添加emitEvent: false，这意味着valueChanges不会被触发（以防止循环）。因此，将您的代码更改为：phoneControl.valueChanges.subscribe(() => {  if (phoneControl.value === "") {    phoneControl.setValidators(null);    // or    // phoneControl.setValidators([]);    // or as mentioned by Tilak    // phoneControl.clearValidators();  } else {    phoneControl.setValidators(this.phoneValidator());  }  phoneControl.updateValueAndValidity({emitEvent: false});});

Answer 2

我会建议你这样做 -if (phoneControl.value === "") {        phoneControl.clearValidators();} else {        phoneControl.setValidators(this.phoneValidator());}phoneControl.updateValueAndValidity({emitEvent: false});清除验证器比将其设置为 null 更好。