angular - clearvalidators() 未按预期与 Angular 中的表单重置方法一起工作

Question

我试图在单选按钮更改事件上清除表单值以及表单中的验证消息，但当表单控件为空时它仍然显示验证消息

 changePaymentType(type) {
    this.myForm.reset();
    this.myForm.clearValidators();
    this.myForm.updateValueAndValidity();

form image after reset and clearvalidator

这是执行reset()和clearvalidator()方法后得到的输出。

如果我在每个控件上的 for 循环中执行代码，它确实可以工作，但随后验证会停止在表单控件上工作。

 <input type="text" class="form-control" autocomplete="off" placeholder="Card Name"
               formControlName="cardName">
        <div class="font-red" *ngIf="(f.cardName.touched || f.cardName.dirty || validateCard)  && f.cardName.errors">
          {{getValidationErrors(f.cardName.errors)}}
        </div>

这就是表单控件的html代码

Answer 1

您缺少更新验证器后需要调用的 updateValueAndValidity() 函数。此外，建议清除控件的验证器而不是整个 formGroup；

this.myForm.get('cardName').clearValidators();
this.myForm.get('cardName').updateValueAndValidity();