Angular2-单击按钮时更新模型

使用angular2 ngModel进行双向数据绑定时：

<input [(ngModel)]="heroName">

是否有一种方法仅在单击按钮后更新模型？或者能够取消用户对输入控件所做的更改？我知道另一种方法，我们可以在其

[]

和

（）

中拆分

[（ngModel）]

，并且只在模糊或按下Enter键等时更新输入-但这不是我想要的

我需要这种行为，因为用户必须能够取消更改。

---

谢谢

你可以这样做

演示：

---

你可以这样做

演示：

---

可以为表单绑定属性创建新属性

看起来像这样

<input [(ngModel)]="formHeroName" #change> <br>
{{selectedHeroName}}
<br>

---

请参见plunker示例-

您可以为表单绑定属性创建新属性

看起来像这样

<input [(ngModel)]="formHeroName" #change> <br>
{{selectedHeroName}}
<br>

参见plunker示例-

您可以将“实时”数据与“有效”数据分开

试着这样做：

<input [(ngModel)]="live.heroName">
<button (click)="save()">Save</button>
<button (click)="reset()">Reset</button>

您可以将“实时”数据与“有效”数据分开

试着这样做：

<input [(ngModel)]="live.heroName">
<button (click)="save()">Save</button>
<button (click)="reset()">Reset</button>

---

[（）]

语法未经您的许可在内部更新模型。所以你应该选择另一种方式。这很有趣，也是我想要的。但是，是否有另一种内置框架来实现这一点，或者这是使用模板变量的唯一方法？其他内置框架意味着什么？它的角度仅为双向语法。我不确定，但我想这是只使用单击事件更新模型的最简单方法。您说您已经研究了

[]（）

语法，所以我认为下一个解决方案是这样的。

[（）]

语法在未经您允许的情况下对模型进行内部更新。所以你应该选择另一种方式。这很有趣，也是我想要的。但是，是否有另一种内置框架来实现这一点，或者这是使用模板变量的唯一方法？其他内置框架意味着什么？它的角度仅为双向语法。我不确定，但我想这是只使用click event更新模型的最简单方法。您说您已经研究了

[]（）

语法，所以我认为下一个解决方案就是这个。这就是我一直在思考的问题，但如果您必须对每个输入都这样做，它会变得非常冗长。谢谢：）这就是我一直在想的，但是如果你必须对每一个输入都这样做的话，它会变得非常冗长。谢谢：）谢谢你的回答。我在寻找一种不必引入新状态变量的方法。如果不跟踪原始/更新变量之间的差异，您是如何实现取消更改的？谢谢您的回答。我在寻找一种不必引入新状态变量的方法。如果不跟踪原始/更新变量之间的差异，您如何实现取消更改？

<input [(ngModel)]="live.heroName">
<button (click)="save()">Save</button>
<button (click)="reset()">Reset</button>

live = { heroName: '', heroPower: '' };
valid = { heroName: '', heroPower: '' };

save() {
    this.valid = Object.assign({}, this.live);
}

reset() {
    this.live = Object.assign({}, this.valid);
}