Угловой 5 материал: выпадающий список (выбрать) не требуется проверка не работает

Question

У меня есть раскрывающийся список материалов внутри моей ngForm, когда я устанавливаю этот выбор как необходимый, он показывает звездочку * рядом с ним, но форма считается действительной, если я не выбираю какой-либо параметр из раскрывающегося списка.

<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>

Это непохоже на то, что произойдет, если я установлю в качестве входных данных материал необходимый, что сделает форму недействительной, если она пуста.

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

Я предпочитаю решить эту проблему, используя шаблонный подход, а не ReactiveForms (я нашел какое-то решение, говорящее о ReactiveForms), кто-нибудь может мне помочь?

Примечание:

Я нашел вопрос с похожим названием, но он использует FormGroup (реактивные формы)

Я привел пример, чтобы дать идею в этом stackblitz

Answer 1

Исходя из превосходного ответа из (от нуля до героя), я хочу уточнить 2 пункта, упомянутых в комментариях:

1 - Вы должны использовать ngModel , а не значение

2- Вы должны дать элементу управления имя

Полная заслуга ему, я хотел разъяснить это любому новичку, как я, поскольку мне потребовалось 2 часа, чтобы выяснить, почему это не работает

Answer 2

Вы добавили required к выбранным option, а не select. Сделай это как:

<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