Angulaire 5 matériel: liste déroulante (select) exigences relatives à la validation ne fonctionne pas

J'ai un matériel déroulant à l'intérieur de mon ngForm, lorsque j'ai mis ce à choisir selon les besoins, il montre un astérisque ( * ) à côté d'elle, mais la forme est considérée comme valide si je ne sélectionnez pas l'option dans le menu déroulant.

<mat-form-field class="col-4 offset-1">
<mat-select placeholder="Some placeholder" [(value)]="data.name" required>
  <mat-option *ngFor="let name of names" [value]="name.value">
    name.viewValue
  </mat-option>
</mat-select>
</mat-form-field>

C'est à la différence de ce qui se passe si je mets le matériel d'entrée requis, qui prendra la forme invalide si elle est vide.

<mat-form-field class="col-4 offset-1">
 <input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required>
  </mat-form-field>

Je préfère résoudre ce à l'aide d'un modèle de l'approche axée sur la pas en utilisant ReactiveForms ( j'ai trouvé une solution à parler de la ReactiveForms), quelqu'un peut-il m'aider?

Remarque:

J'ai trouvé un question du titre similaire, mais c'est à l'aide de FormGroup (reactiveForms)

J'ai mis un exemple pour donner une idée de ce stackblitz