title: Angular(2+) template forms display error message in a <ul>
body: <p>I was trying out the angular forms out today and even though it works I cannot seem to get the validation logic right. What I actually want to do is that when a field will be incorrect it appaers on the top of the form with a message rendered in a &lt;'ul'> &lt;'li'> tag but only when the complete form has been filled out. Currently it shows the errors as soon as there will be a focus on the input boxes.</p>
  
  <p><a href="https://i.stack.imgur.com/9z8Pg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9z8Pg.png" alt="enter image description here"></a></p>
  
  <p>and finally here is my relevant code:</p>
  
  <pre><code>            &lt;form #formAdd="ngForm" (ngSubmit)="submit(formAdd)"&gt;
  
                  &lt;!-- error reporting--&gt;
  
                      &lt;ul *ngIf="!formAdd.valid &amp;&amp; formAdd.dirty" class="alert alert-danger"&gt;
                          &lt;li *ngIf="className.touched &amp;&amp; !className.valid"&gt;
                              &lt;span *ngIf="className.errors.required"&gt;Class name is required.&lt;/span&gt;
                              &lt;span *ngIf="className.errors.minlength"&gt;Class name should be at least 3 characters.&lt;/span&gt;
                          &lt;/li&gt;
                          &lt;li *ngIf="maxStudents.touched &amp;&amp; !maxStudents.valid"&gt;
                              &lt;span *ngIf="maxStudents.errors.required"&gt;Maximum number of students is required.&lt;/span&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
  
                  &lt;div ngModelGroup="class"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="className"&gt;Class name:&lt;/label&gt;
                          &lt;input required
                                 minlength="3"
                                 ngModel
                                 #className="ngModel"
                                 name="className"
                                 (change)="log(className)"
                                 type="text"
                                 class="form-control"
                                 id="className" /&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="maxStudents"&gt;Max students:&lt;/label&gt;
                          &lt;input required  
                                 ngModel 
                                 #maxStudents="ngModel"
                                 name="maxStudents" 
                                 type="number" 
                                 class="form-control" 
                                 id="maxStudents"&gt;
                      &lt;/div&gt;
  
                      &lt;button type="submit" class="btn btn-primary" [disabled]="!formAdd.valid"&gt;Submit&lt;/button&gt;
  
                  &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>Any help will be much appreciated, Cheers!</p>