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

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

重现步骤

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

我希望取消按钮可以将 hero.name 改回原来的值。这是 resetForm() 应该如何工作的吗？有什么不同的方法吗？

Answer 1

如果您创建了一个 reset() 方法，并在其中设置了默认值，那么您可以在需要时调用它，就像在 ngOninit 中一样，然后单击重置按钮：

  ngOnInit(){
    this.reset();
  }
  reset(){
    this.hero = new Hero(1,'Plunker');
  }

  cancel(myForm){
    this.reset();
  }

DEMO

您可以通过重构重新组合 cancel() 和 reset()，但您可能希望保持原样，以防在 cancel 中添加其他内容。

Answer 2

从角度文档来看，我想解决方案是使用响应式表单而不是模板驱动的表单。 https://angular.io/guide/reactive-forms 读取（重点：

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