title: Angular 2 template driven form - validation summary
body: <p>I am trying to provide a validation summary for a template driven form in angular. When the form is invalid I would like to list the validation errors so that the user knows which inputs to fix.</p>
  
  <p>So far I added this code to try and display the validation errors</p>
  
  <pre><code>&lt;pre&gt;{{heroForm.form.errors | json}}&lt;/pre&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let error of heroForm.form.errors"&gt;
      {{error}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is this possible from a template driven form? </p>
  
  <p>heroForm.form.errors remains null, even when there are validation errors on the form.</p>
  
  <p>My actual form is more complex, but I can use the angular tour of heroes tutorial as an example:</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;pre&gt;{{heroForm.form.errors | json}}&lt;/pre&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let error of heroForm.form.errors"&gt;
        {{error}}
      &lt;/li&gt;
    &lt;/ul&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;/form&gt;
  </code></pre>