Angular Material中Mat-Select初始值为null时默认显示None空选项问题

模板修改 #

首先给无值的None选项显式绑定null作为值，和你要求的项值为null时显示None的逻辑匹配：

<mat-form-field>
  <mat-label>Status</mat-label>
  <mat-select formControlName="statusId">
    <!-- 给None选项绑定null值 -->
    <mat-option [value]="null">None</mat-option>
    <mat-option *ngFor="let item of statuses" [value]="item.id">
      {{ item.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

表单初始化配置 #

因为你使用的是响应式表单（带formControlName属性），在构建表单组时给statusId控件设置初始值为null即可：

// 以FormBuilder用法为例
import { FormBuilder, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

// 初始化表单
form = this.fb.group({
  // 初始值设为null，会自动匹配绑定了null值的None选项
  statusId: [null, Validators.required], // 可根据你的需求调整验证规则
  // 其他表单控件定义...
})

可选补充 #

如果后续需要重置表单回到选中None的状态，调用表单重置方法时指定statusId值为null即可：

resetForm() {
  this.form.reset({
    statusId: null,
    // 其他控件的重置值定义...
  })
}

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