title: Angular 5 material: dropdown (select) required validation is not working
body: <p>I have a material dropdown inside my ngForm, when I set this select as required it shows an asterisk * beside it but the form is seen as valid if I don't select any option from the dropdown.</p>
  
  <pre><code>&lt;mat-form-field class="col-4 offset-1"&gt;
  &lt;mat-select placeholder="Some placeholder" [(value)]="data.name" required&gt;
    &lt;mat-option *ngFor="let name of names" [value]="name.value"&gt;
      name.viewValue
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>This is unlike what happens if I set the material input to required which will make the form invalid if it is empty.</p>
  
  <pre><code>&lt;mat-form-field class="col-4 offset-1"&gt;
   &lt;input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I prefer to solve this using a template driven approach not by using ReactiveForms ( I found some solution talking about the ReactiveForms), can anyone help me?</p>
  
  <p>Note:</p>
  
  <p>I found a <a href="https://stackoverflow.com/questions/48037287/angular-5-form-validation-required-not-working">question</a> of similar title but it is using FormGroup (reactiveForms)</p>
  
  <p>I have put an example to give an idea in this <a href="https://stackblitz.com/edit/angular-gbc3ts?file=app%2Fapp.component.ts" rel="noreferrer">stackblitz</a> </p>