表单重置后重置验证（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

如果您希望将表单重置为原始状态。在任何事情被触及之前的意思 Mark as Pristine 将是您最好的选择。

实际上markAsPristine 会做你所期望的，但也会根据表单值重新计算有效性。

Reset 既可以清除表单又可以标记它，因为它从未被触摸过，也就是 Pristine

所以在代码中你会做类似的事情。

this.locationForm.reset();

这会将 fromGroup 及其所有子项标记为原始。 这将有效地重置您的表单，并且不会出现任何验证错误。

如果这有帮助，请告诉我！

例如。 https://angular-qv2mfx.stackblitz.io

Answer 2

您的表单中有 2 个内容：FormGroup 和 FormGroupDirective。要消除错误，您需要重置它们：

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

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