Angular 5 Material下拉框(Select)必填验证失效问题

嘿，这个坑我之前踩过！你遇到的问题核心在于没有用Angular表单的ngModel来绑定下拉框的值，而是用了普通的[(value)]——虽然必填星号显示了，但ngForm根本没法通过value绑定来跟踪控件的校验状态，自然会误判表单有效。

修复步骤很简单： #

1. 把[(value)]="data.name"替换成[(ngModel)]="data.name"
2. 给<mat-select>添加一个唯一的name属性（ngForm需要靠name来识别表单控件）

修改后的代码如下：

<mat-form-field class="col-4 offset-1">
  <mat-select 
    placeholder="Some placeholder" 
    [(ngModel)]="data.name" 
    name="nameSelect" <!-- 新增唯一name属性 -->
    required>
    <mat-option *ngFor="let name of names" [value]="name.value">
      {{ name.viewValue }} <!-- 补上插值表达式，否则只会显示字符串文本 -->
    </mat-option>
  </mat-select>
</mat-form-field>

为什么这样改？ #

Angular的模板驱动表单（ngForm）依赖ngModel来建立控件和表单的关联，required校验指令也是和ngModel配合工作的。没有ngModel的话，就算你加了required属性，表单也不会把这个控件纳入校验范围，只会单纯显示星号而已。另外我顺便帮你补上了选项文本的插值表达式，不然原来的代码只会显示"name.viewValue"字符串，而不是实际的选项内容~

内容的提问来源于stack exchange，提问作者Ahmed Elkoussy