Angular2 - модель обновления на кнопку мыши

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

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

Посмотрел бы, как этот

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

Model Update Отменить

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