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

您的表单中有两件事：FormGroup和FormGroupDirective。为了使错误消失，您需要重置它们：

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

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

表单重置后重置验证（ReactiveForms）

2 个答案: