Angular 5材料:下拉(选择)所需的验证不起作用

我在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的解决方案),任何人都可以帮助我吗?

注意:

我找到了一个类似标题的question,但它使用FormGroup(reactiveForms)

我在这个stackblitz中举了一个例子给出了一个想法

最佳答案
您在select选项中添加了required,而不是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

转载注明原文:Angular 5材料:下拉(选择)所需的验证不起作用 - 代码日志