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

这与我将材质输入设置为required时会发生的情况不同,如果表单为空,则会使表单无效.

<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(reactiveForms)

我举了一个例子来说明这个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