为何标记为必填的控件为空时Angular FormGroup仍显示为有效状态？

嘿，我一眼就看出问题出在哪了——你的多选下拉框校验失效是因为初始值和Validators.required的校验逻辑不匹配！

问题根源 #

当mat-select开启了multiple属性后，它绑定的表单控件值类型是数组。而Validators.required对数组的校验规则是：只有当数组完全为空（也就是[]）时，才会判定为无效。但你现在给FormControl的初始值是['']——这是一个包含空字符串的非空数组，所以不管选没选选项，校验都会认为是有效的。

解决方案 #

1. 修正初始值为空白数组

直接把FormControl的初始值改成空数组，这样用户未选择任何选项时，控件值就是[]，Validators.required就能正常触发校验：

this.formSubmission = new FormGroup({
  triggers: new FormControl([], [Validators.required])
});

2. （可选）添加自定义校验兜底（防止空值混入）

如果担心业务场景中可能出现数组里有空字符串的情况（比如后端返回的选项值异常），可以加个自定义校验器确保数组非空且没有无效值：

// 先写一个自定义校验函数
import { ValidatorFn, AbstractControl } from '@angular/forms';

const nonEmptyValidArray: ValidatorFn = (control: AbstractControl) => {
  const selectedValues = control.value as string[];
  // 数组为空，或者存在空/空白字符串，都判定为无效
  if (!selectedValues || selectedValues.length === 0 || selectedValues.some(val => val.trim() === '')) {
    return { invalidSelection: true };
  }
  return null;
};

// 然后在FormGroup中使用
this.formSubmission = new FormGroup({
  triggers: new FormControl([], [Validators.required, nonEmptyValidArray])
});

3. 在模板中添加错误提示（提升用户体验）

可以给mat-form-field加上错误提示，让用户清楚知道需要选择选项：

<div [formGroup]="formSubmission">
  <mat-form-field appearance="fill">
    <mat-label>Triggers</mat-label>
    <mat-select formControlName="triggers" multiple>
      <mat-option *ngFor="let trigger of triggersList" [value]="trigger.TRIGGER_NAME">{{trigger.TRIGGER_NAME}}</mat-option>
    </mat-select>
    <!-- 原生required的错误提示 -->
    <mat-error *ngIf="formSubmission.get('triggers')?.hasError('required')">
      请至少选择一个触发器
    </mat-error>
    <!-- 自定义校验的错误提示（如果用了的话） -->
    <mat-error *ngIf="formSubmission.get('triggers')?.hasError('invalidSelection')">
      请选择有效的触发器
    </mat-error>
  </mat-form-field>
</div>

现在再测试一下：当你没有选择任何选项时，点击测试按钮，this.formSubmission.status应该会返回INVALID，完全符合你的预期啦！

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