Angular 4重置状态表格

Question

我有一个表单和一些必填字段的模态。 当我打开模式时，我正确地看到字段为空，如果我在需要的字段中写入某些内容，然后取消写入的字词，我将该字段正确地视为无效。 问题是，如果我关闭并重新打开模式，我希望看到空的字段，如果它是第一次打开它，但出于某种原因，如果我重置表单，我也会看到以前的无效状态。 这是我的模式后，我关闭它，似乎地位永远不会被重置了：

       <form #modelForm="ngForm"> 
            <div class="modal-body" *ngIf="checkpoint"> 

             <div class="row"> 
              <div class="form-group label-floating"> 
               <label class="control-label">{{'checkpoint.table.dialog.labels.name' 
                | translate }}<span class="star">*</span> 
               </label> <input class="form-control" id="name" name="name" required 
                [(ngModel)]="checkpoint.name" #name="ngModel" /><small 
                [hidden]="name.valid || name.pristine" class="text-danger"> 
                {{'checkpoint.table.validations.required' | translate }}</small> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="form-group label-floating"> 
               <label class="control-label">{{'checkpoint.table.dialog.labels.passStockAlert' 
                | translate }}</label> <input pattern="[0-9]*" 
                class="form-control" name="passStockAlert" 
                id="passStockAlert" 
                [(ngModel)]="checkpoint.passStockAlert" 
                #checkPoint="ngModel" /><small 
                [hidden]="checkPoint.valid || checkPoint.pristine" 
                class="text-danger"> 
                {{'checkpoint.table.validations.invalid' | translate }}</small> 
              </div> 
             </div> 
             <div class="row"> 
              <div class="category form-category"> 
               <span class="star">*</span> {{ 'form.requiredfields' | 
               translate }} 
              </div> 
             </div> 

            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-info btn-round" 
              (click)="save();resetForm(modelForm)" data-dismiss="modal" 
              [disabled]="modelForm.form.invalid || modelForm.form.pristine" 
              label="Save">{{'checkpoint.table.dialog.save' | 
              translate }}</button> 
             <button type="button" class="btn btn-danger btn-round" 
              (click)="resetForm(modelForm)" data-dismiss="modal">{{'checkpoint.table.dialog.close' | 
              translate }}</button> 
            </div> 
           </form> 

这是我的复位形式方法：

resetForm(myForm: NgForm) { 
    myForm.form.reset(); 
    } 

Answer 1

我已经成功地实现了这个：

我-component.html

<form (ngSubmit)="resetFormFlags(myForm)" #myForm="ngForm"> 
     <h4> title </h4> 
     <button type="submit"> btnText</button> 
    </form> 

我-component.ts

resetFormFlags(myForm: any) { 
    myForm.reset(); 
} 

希望它能帮助！

Answer 2

尝试这样下面的代码：

<form name="modelForm" role="form" novalidate (ngSubmit)="resetForm(modelForm)" #modelForm="ngForm"> 
    <div class="modal-body" *ngIf="checkpoint"> 
     <div class="row"> 
      <div class="form-group label-floating"> 
       <label class="control-label">{{'checkpoint.table.dialog.labels.name' 
        | translate }}<span class="star">*</span> 
       </label> 
       <input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" /> 
       <small [hidden]="!(modelForm.controls.name?.dirty && modelForm.controls.name?.invalid)" class="text-danger"> 
        {{'checkpoint.table.validations.required' | translate }} 
       </small> 
      </div> 
      <button class="btn btn-primary" [disabled]="modelForm.form.invalid" type="submit">{{'checkpoint.table.dialog.save' | translate }}</button> 
      <button class="btn btn-white" type="button" (click)="resetForm(modelForm)"> {{'checkpoint.table.dialog.close' | translate }}</button> 
     </div> 
    </div> 
</form> 

componen.ts

resetForm(editForm: NgForm) { 
    editForm.reset(); 
}