Angular 4 Status-Formular zurücksetzen

Question

Ich habe ein Modal mit einem Formular und einigen Pflichtfeldern. Wenn ich das Modal richtig öffne, sehe ich die Felder leer, wenn ich etwas in das Feld schreibe und dann die Wörter annulliere, sehe ich das Feld korrekt als ungültig. Das Problem ist, dass, wenn ich schließen und das Modal wieder öffnen möchte ich die leeren Felder sehen möchte, wenn ich es zum ersten Mal öffne, aber aus irgendeinem Grund sehe ich den vorherigen ungültigen Status auch, wenn ich das Formular zurücksetzen. Das ist mein modal ist, nachdem ich es zu schließen, scheint es, dass der Status nie zurückgesetzt werden:

       <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> 

Und das ist meine Reset Form Methode:

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

Answer 1

ich diese erfolgreich umgesetzt habe:

my-component.html

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

my-component.ts

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

Hoffe, es hilft!

Answer 2

Versuchen Sie, wie dies unten Code:

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