Question

在Angular 4应用程序中，我有一个模板驱动的表单，其控件绑定到我的组件中的值。当表单输入更改时，绑定到输入的对象立即更改（双向绑定）。单击取消按钮时，我想撤消对绑定对象的更改。这允许用户更改值然后改变主意并取消他们的更改。

https://plnkr.co/edit/RnnPwtHZY0qTN1H6er0z?p=preview

上面的plunker有一个带有绑定字段的表单来读取hero.name

  <h2>{{hero.name}} details!</h2>

绑定到英雄对象的输入。

  <form #myForm="ngForm" (ngSubmit)="save(myForm)">
    <div class="form-group">
      <label>name: </label>
      <input name="heroName" [(ngModel)]="hero.name" placeholder="name" />
    </div>
    <button (click)="cancel(myForm)">Cancel</button>
    <button type="submit">Save</button>
  </form>

取消按钮调用ngForm的resetForm（）方法。

  cancel(myForm){
    myForm.resetForm();
  }

Repro步骤

更改英雄名称;立即观察h2变化，证明绑定对象也发生了变化
点击取消;观察名称已清除且h2发生更改，因为hero.name现在为空

我希望取消按钮将hero.name更改回原始值。这是resetForm（）应该如何工作？有不同的方式吗？

Answer 1

从角度文档中，我想解决方案是使用反应形式而不是模板驱动形式。 https://angular.io/guide/reactive-forms读到（强调：

与反应范式保持一致，该组件保留了数据模型的不变性，将其视为纯粹的数据源原始价值观。 而不是直接更新数据模型组件提取用户更改并将其转发到外部组件或服务，它们与它们做某事（例如保存他们）并将新数据模型返回给反映该数据的组件更新模型状态。

Answer 2

如果你设置了一个reset（）方法，你设置了默认值，那么你可以在需要的时候调用它，就像在ngOninit和reset按钮点击一样：

{{1}}

DEMO

您可以通过重构重新联合cancel（）和reset（），但是如果您在取消中添加其他内容，则可能需要保留它。

取消角形状时，撤消对模型状态的更改

Repro步骤

2 个答案: