title: Undo changes to model state when angular form is canceled
body: <p>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.</p>
  
  <p><a href="https://plnkr.co/edit/RnnPwtHZY0qTN1H6er0z?p=preview" rel="noreferrer">https://plnkr.co/edit/RnnPwtHZY0qTN1H6er0z?p=preview</a></p>
  
  <p>The plunker above has such a form with a bound field to read the hero.name</p>
  
  <pre><code>  &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
  </code></pre>
  
  <p>An input bound to a hero object.</p>
  
  <pre><code>  &lt;form #myForm="ngForm" (ngSubmit)="save(myForm)"&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input name="heroName" [(ngModel)]="hero.name" placeholder="name" /&gt;
      &lt;/div&gt;
      &lt;button (click)="cancel(myForm)"&gt;Cancel&lt;/button&gt;
      &lt;button type="submit"&gt;Save&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>The cancel button calls the ngForm's resetForm() method. </p>
  
  <pre><code>  cancel(myForm){
      myForm.resetForm();
    }
  </code></pre>
  
  <h3>Repro steps</h3>
  
  <ol>
  <li>Change the hero name; Observe the h2 changes immediately proving that the bound object changed as well</li>
  <li>Click cancel; Observe the name is cleared and the h2 changes because the hero.name is now null</li>
  </ol>
  
  <p>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?</p>