Undo changes to model state when angular form is canceled

Question

In an Angular 4 application, I have a template driven form with controls bound to values in my component. When the form input changes the object bound to the input changes immediately (two-way binding). When the cancel button is clicked, I want to undo the change to the bound object. This allows the user to change values then change their mind and cancel their changes.

https://plnkr.co/edit/RnnPwtHZY0qTN1H6er0z?p=preview

The plunker above has such a form with a bound field to read the hero.name

  <h2>{{hero.name}} details!</h2>

An input bound to a hero object.

  <form #myForm="ngForm" (ngSubmit)="save(myForm)">
    <div class="form-group">
      <label>name: </label>
      <input name="heroName" [(ngModel)]="hero.name" placeholder="name" />
    </div>
    <button (click)="cancel(myForm)">Cancel</button>
    <button type="submit">Save</button>
  </form>

The cancel button calls the ngForm's resetForm() method.

  cancel(myForm){
    myForm.resetForm();
  }

Repro steps

1. Change the hero name; Observe the h2 changes immediately proving that the bound object changed as well
2. Click cancel; Observe the name is cleared and the h2 changes because the hero.name is now null

I expected the cancel button to change the hero.name back to the original value. Is this how resetForm() is supposed to work? Is there a different way?

Answer 1

If you make a reset() method, where you set the default values, then you can call it whenever it's needed, as in ngOninit and reset button click:

  ngOnInit(){
    this.reset();
  }
  reset(){
    this.hero = new Hero(1,'Plunker');
  }

  cancel(myForm){
    this.reset();
  }

DEMO

You can reunite cancel() and reset() by refactoring, but you may want keep it as is in case you add something else in cancel.

Answer 2

From the angular documentation, I guess the solution is to use a reactive form instead of a template driven form. https://angular.io/guide/reactive-forms reads (emphasis :

In keeping with the reactive paradigm, the component preserves the immutability of the data model, treating it as a pure source of original values. Rather than update the data model directly, the component extracts user changes and forwards them to an external component or service, which does something with them (such as saving them) and returns a new data model to the component that reflects the updated model state.