title: Reset an Angular Template-Driven Form?
body: <p>I'm learning Angular, and I cannot figure out how to reset the validation of a template driven form.</p>
  
  <p>In the official tutorial, they show a method to reset the form so it doesn't show any error messages even if the untouched field is empty, but it doesn't work for me.</p>
  
  <p>Here is the official example of the app, where "New Hero (with reset)" and "New Hero (without reset)" seem to result in the same situation (red error indicators on the left of the input, "Name is required" warning under the name input). I remove the value in the input and press the button, but the error message remains:</p>
  
  <p><a href="https://stackblitz.com/angular/kmoqyljrgve" rel="nofollow noreferrer">https://stackblitz.com/angular/kmoqyljrgve</a></p>
  
  <pre><code>&lt;form (ngSubmit)="onSubmit()" #heroForm="ngForm"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt;
      &lt;input type="text" class="form-control" id="name"
             required
             [(ngModel)]="model.name" name="name"
             #name="ngModel"&gt;
      &lt;div [hidden]="name.valid || name.pristine"
           class="alert alert-danger"&gt;
        Name is required
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="alterEgo"&gt;Alter Ego&lt;/label&gt;
      &lt;input type="text" class="form-control" id="alterEgo"
             [(ngModel)]="model.alterEgo" name="alterEgo"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="power"&gt;Hero Power&lt;/label&gt;
      &lt;select class="form-control" id="power"
              required
              [(ngModel)]="model.power" name="power"
              #power="ngModel"&gt;
        &lt;option *ngFor="let pow of powers" [value]="pow"&gt;{{pow}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;div [hidden]="power.valid || power.pristine" class="alert alert-danger"&gt;
        Power is required
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid"&gt;Submit&lt;/button&gt;
    &lt;button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()"&gt;New Hero&lt;/button&gt;
    &lt;i&gt;with&lt;/i&gt; reset
  
    &amp;nbsp;&amp;nbsp;
    &lt;button type="button" class="btn btn-default" (click)="newHero()"&gt;New Hero&lt;/button&gt;
    &lt;i&gt;without&lt;/i&gt; reset
  
   &lt;!-- NOT SHOWN IN DOCS --&gt;
    &lt;div&gt;
      &lt;hr&gt;
      Name via form.controls = {{showFormControls(heroForm)}}
    &lt;/div&gt;
   &lt;!-- - --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Can anyone explain this or show me what i misunderstood?</p>
  
  <p>Thanks in advance</p>