表单重置后的重置验证(ReactiveForms)

Question

HTML：

<form [formGroup]="locationForm" #myForm="ngForm" class="formContainer">

<div class="buttonContainer">
      <section class="btn1">
          <button 
          (click)="addAnotherMethod()"
          mat-raised-button 
          color="primary"> Add another method </button>
      </section>

      <section>
          <button
          (click)="addAnotherLocation()"
          mat-raised-button 
          color="primary"> Add another location </button>
      </section> 
    </div>

.TS文件

@ViewChild('myForm') currentLocationForm;

addAnotherLocation(): void{
    if(this.locationForm.valid){
      //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

addAnotherMethod: void {
    if(this.locationForm.valid){
     //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

使用上面的代码，我可以在数据发送到redux之后重置表单，但是在重置之后，新表单中的验证错误消息会显示为填充所需的字段。我需要帮助，在使用正确的方法重置此表单和清除验证时，新的表单显示。我也可能使用错误的方法调用两个按钮函数。谢谢。

Answer 1

在您的表单中有两样东西：FormGroup和FormGroupDirective。要使错误消失，您需要重新设置这两个错误：

this.currentLocationForm.resetForm();
this.locationForm.reset();

有关原因的更多详细信息，请参见这帖子。