angular - Angular2 - restaurar valor anterior al cancelar en enlace de datos bidireccional

En la vinculación de datos bidireccional, ¿qué pasa si el usuario decide cancelar las ediciones actuales? ¿Cómo se puede lograr esto en Angular 2?

Considera el siguiente fragmento de código:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `Name: {{ name  }}<br>
    <input *ngIf='editMode' type="text" [(ngModel)]='name' /><br>
    <button *ngIf='!editMode' (click)='editMode = !editMode' >Edit</button>
    <button *ngIf='editMode' (click)='editMode = !editMode' >Save</button><br>
    <button *ngIf='editMode' (click)='editMode = !editMode' >Cancel</button>`
})
export class AppComponent {
  public name = 'Essa';
  public editMode false;
}

Quiero que el valor antiguo se restaure cuando el usuario presione el botón de cancelar.

Aquí está el plunker como ejemplo.

Respuesta #1

No creo que haya algún soporte directo para esto. Simplemente almacena el valor y recupéralo al cancelar

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `Name: {{ name  }}<br>
    <input *ngIf='editMode' type="text" [(ngModel)]='name' /><br>
    <button *ngIf='!editMode' (click)='startEdit()' >Edit</button>
    <button *ngIf='editMode' (click)='save()' >Save</button><br>
    <button *ngIf='editMode' (click)='cancel()' >Cancel</button>`
})
export class AppComponent {
  public name = 'Essa';
  public editMode false;
  startEdit() {
    this.oldName = this.name;
    this.editMode = !this.editMode;
  }
  save() {
    this.editMode = !this.editMode;
  }
  cancel() {
    this.editMode = !this.editMode;
    this.name = this.oldName;
  }
}

Los métodos startEdit, save y cancel no necesitan ser añadidos explícitamente al componente. Las vinculaciones pueden contener más de una instrucción separada por ;, pero me gusta más este enfoque si hay más de una instrucción.

Plunker