Angular2 - обновить модель по нажатию кнопки

Question

При использовании angular2 ngModel для двусторонней привязки данных:

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

Есть ли способ обновить модель только после нажатия кнопки? Или сможете отменить изменения, внесенные пользователем в элемент управления вводом? Я знаю о другом подходе, где мы можем разделить [(ngModel)] в его [] а также () и обновлять ввод только по размытию или при нажатии клавиши Enter и т. д. - но это не то, что я хочу.

Мне это нужно, потому что пользователь должен иметь возможность отменить изменения. Спасибо

Answer 1

Вы можете сделать следующее для этого,

ДЕМО: 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

Вы можете создать новое свойство для свойства привязки формы.

Будет выглядеть так

<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

Вы можете отделить ваши "живые" данные от ваших "действительных" данных.

Попробуйте что-то вроде этого:

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