title: Angular 5 required form fields not working with material
body: <p>My first Angular app with Angular 5.</p>
  
  <p>I am following the documentation here: <a href="https://angular.io/guide/form-validation" rel="nofollow noreferrer">https://angular.io/guide/form-validation</a>. Here is the form that I created:</p>
  
  <pre><code>&lt;form class="form-container"&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Shop Name" [(ngModel)]="pizzaPlace.shopName"
             id="shopName" #shopName="ngModel"
             required minlength="4"&gt;
    &lt;/mat-form-field&gt;
    &lt;div *ngIf="shopName.invalid &amp;&amp; (shopName.dirty || shopName.touched)"
         class="alert alert-danger"&gt;
  
      &lt;div *ngIf="shopName.errors.required"&gt;
        Shop name is required.
      &lt;/div&gt;
      &lt;div *ngIf="shopName.errors.minlength"&gt;
        Shop name must be at least 4 characters long.
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br/&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Contact Name" [(ngModel)]="pizzaPlace.contactName"
             id="contactName" #contactName="ngModel"
             required minlength="4"&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So now if I read the docs correctly, entering and leaving the shop name field will generate an error, but it doesn't seem to be working. I get no indication whatsoever that there's any kind of a problem at all.</p>