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(); 
}