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