将表单重置为其最初设置的值答案

【问题标题】：Resetting form to its values set originally将表单重置为其最初设置的值
【发布时间】：2019-11-16 20:32:26
【问题描述】：

我有一个模板驱动的表单，我在 get 调用中设置下拉项的默认值：

<form class="col-md-5 location-seachform" name="loctionForm" #f="ngForm" (ngSubmit)="onSubmit(f);" novalidate  >
   <select class="form-control" name="somename" [(ngModel)]="criterialDefaultVal" >
     <option [value]="ii" [attr.selected]="ii==0 ? '' : null" *ngFor="let loc_crit of objectKeys(somecriteria); let ii= index"> {{somecriteria[loc_crit] }} 
     </option>
   <select>
  <button class="btn btn--filled pull-right" type="submit"><span class="btn__copy"><span class="btn__label">Search</span></span></button>
  <button class="btn btn--filled pull-right" (click)="formReset(f)" type="button"><span class="btn__copy"><span class="btn__label">Clear</span></span></button>
</form>

所以这里[(ngModel)]="criterialDefaultVal" 用于设置默认值。现在我还有一个“清除”按钮，用于清除我对下拉默认值所做的任何更改。为此，我使用了这个：

formReset(ResetFormVal){
    ResetFormVal.form.reset()
}

现在，当我单击清除按钮时，它甚至会“重置”我最初设置的那些值，使选择变为空白；而我只想重置更改的值。请帮忙。

【问题讨论】：

阅读文档：它解释了该方法的作用（不是您认为的那样），以及您可以传递哪些参数以使其执行您想要的操作。 angular.io/api/forms/FormGroup#reset

标签： angular

【解决方案1】：

reset() 方法清除所有值。将表单的初始值存储在变量中并设置这些值，而不是在单击时重置表单。

【讨论】：

【解决方案2】：

如前所述，重置只会清除您的表单。

我建议您改为执行以下操作之一：

创建一个包含所有表单属性的 FormModel 类。在这种情况下：

class FormModel {
    criterialDefaultVal: string;
}

在你的组件中，维护两个属性

originalFormValue: FormModel;
currentFormValue: FormModel;

在您的 init 函数中，从原始的克隆中设置 currentFormValue

this.currentFormValue = Object.assign({}, this.originalFormValue);

在你的重置中，做同样的事情。这将深度克隆该值，而不指向相同的引用，并将您的值恢复为原始值。

this.currentFormValue = Object.assign({}, this.originalFormValue);

最后但同样重要的是，在您的 html 中，您应该参考 currentFormValue?.criterialDefaultVal

【讨论】：