Question

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

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

有没有办法只在点击一个按钮后更新模型？或者能够取消用户对输入控件所做的更改？我知道另一种方法，我们可以在其[(ngModel)]和[]中拆分()，只更新模糊输入或按Enter键等等 - 但这不是我想要的是什么。

我需要这样做，因为用户必须能够取消更改。感谢

Answer 1

你可以这样做，

DEMO：http://plnkr.co/edit/OW61kGGcxV5MuRlY8VO4?p=preview

{{heroName}}<br>
<input [ngModel]="heroName" #change> <br>
<br>
<button (click)="update(change.value)">Update Model</button>

export class App {
  heroName="Angular2";
  update(value){
    console.log('value before button click' + this.heroName);
    this.heroName=value;
    console.log('value after button click' + this.heroName);
  }
}

Answer 2

您可以为表格binded属性创建新属性。

看起来像这样

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

更新模型取消

export class App implements OnInit {
selectedHeroName="Angular2";
formHeroName = "";

ngOnInit() {
  this.formHeroName = this.selectedHeroName;
}

update(){
  this.selectedHeroName= this.formHeroName;
}

cancel() {
  this.formHeroName = this.selectedHeroName;
}
}

请参阅plunker例如 - http://plnkr.co/edit/0QEubJDzlgs0CdnKrS8h?p=preview

Answer 3

你可以将你的＆＃34; live＆＃34;来自您的有效数据＆＃34;数据

尝试这样的事情：

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

Angular2 - 点击按钮

3 个答案: