使用[(NgModel)]的mat-select必填验证失效问题咨询

你的问题核心在于：Validators.required 验证器会把数值 0 视为有效值——因为0在JavaScript中是一个非空的原始值，而required仅判定null/undefined/空字符串/空数组为“空值”。所以当project.disciplineId初始值设为0时，即便用户未选择下拉选项，表单控件也会认为值已存在，验证直接通过，导致Stepper允许进入下一步。

你将模型初始值改为null的做法是规范且合理的，这是解决这类场景的常用方案之一，以下是详细说明及其他可选方案：

方案1：将模型初始值设为null（推荐） #

修改ProjectRequest构造函数，把下拉框对应的属性初始值从0改为null，同时调整属性类型兼容null：

export class ProjectRequest {
    name: string;
    objective: string;
    description: string;
    startDate: Date;
    estimatedEndDate: Date;
    locationId: number | null;
    disciplineId: number | null;
    categoryId: number | null

    constructor() {
        this.name = "";
        this.objective = "";
        this.description = "";
        this.startDate = new Date();
        this.estimatedEndDate = new Date();
        this.locationId = null;
        this.disciplineId = null;
        this.categoryId = null;
    }
}

保持表单控件的初始值为null：

this.secondFormGroup = this._formBuilder.group({
  discipline: [null, Validators.required]
});

此时Validators.required会正确识别未选择状态，因为null属于该验证器判定的“空值”范围，只有用户选择了有效选项（非null的数字值）时，验证才会通过。

方案2：自定义验证器（适用于无法修改模型初始值的场景） #

如果因业务限制不能修改模型初始值，可以自定义验证器排除0这个无效值：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function nonZeroRequired(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    // 判定值为null/undefined或0时，返回验证错误
    if (value === null || value === undefined || value === 0) {
      return { nonZeroRequired: true };
    }
    return null;
  };
}

在表单组中使用该自定义验证器替代Validators.required：

this.secondFormGroup = this._formBuilder.group({
  discipline: [0, nonZeroRequired()]
});

模板中可添加对应错误提示：

<mat-error *ngIf="secondFormGroup.get('discipline')?.hasError('nonZeroRequired')">
  Por favor seleccione una disciplina
</mat-error>

额外优化建议 #

在Angular响应式表单中，建议避免同时使用formControlName和[(ngModel)]，容易引发状态不一致问题。可以通过表单控件的valueChanges事件同步值到模型：

this.secondFormGroup.get('discipline')?.valueChanges.subscribe(value => {
  this.project.disciplineId = value;
});

然后移除模板中的[(ngModel)]绑定：

<mat-select name="discipline" formControlName="discipline" required>

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