Angular 5 material: dropdown (select) required validation is not working

Based on the excellent answer of (from zero to hero), I want to clarify 2 points mentioned in comments:

1- You have to use ngModel not value

2- You have to give the control a name

Full credit goes to him, I wanted to clarify this to any newcomer like me as it took me 2 hours to find out why it doesn't work


You added required to the select's option, not the select. Do it like:

<mat-form-field>
  <mat-select placeholder="Favorite food" name="select" [(ngModel)]="select" required>
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

DEMO