Angular mat-select多选必填验证失效及提交数据格式转换问题

一、必填验证不触发问题修复 #

以下是问题根因及对应修改方案：

• 验证器传参格式错误
  FormBuilder.group 的第二个参数为同步验证器集合，多个验证器需要放在同一个数组内，你之前将minLength放在第三个异步验证器的参数位，导致最小长度校验未生效；同时多选控件初始值需要设为空数组，不要用空字符串。
  修改前代码：

  selectedSkills :['', Validators.required, Validators.minLength(1)]
  

  修改后代码：

  selectedSkills :[[], [Validators.required, Validators.minLength(1)]]
  

• 模板中控件名存在多余空格
  HTML 中*ngIf判断的控件名写为selectedSkills （末尾带空格），和 TS 中定义的selectedSkills不一致，导致无法读取正确的控件校验状态。
  修改前代码：

  *ngIf="trainerForm.controls['selectedSkills '].invalid "
  

  修改后代码（额外增加dirty/touched判断，避免页面刚加载就显示错误提示，优化体验）：

  *ngIf="trainerForm.controls.selectedSkills.invalid && (trainerForm.controls.selectedSkills.dirty || trainerForm.controls.selectedSkills.touched)"
  

• 字段名拼写错误
  你的skillList数组定义的 ID 字段是skillId，但 TS 和 HTML 中多处误写为deviceId，导致选项值绑定异常。需要把所有item.deviceId、i.deviceId统一替换为item.skillId、i.skillId。

二、后端数据格式适配 #

提交时对选中的 ID 数组做过滤和转换即可，注意要剔除全选选项的占位值0：
修改onSubmit方法为以下代码：

onSubmit(): void{
  // 校验不通过直接拦截提交
  if (this.trainerForm.invalid) return;

  // 过滤全选占位值，转换为后端要求的结构
  const selectedSkillIds = this.trainerForm.value.selectedSkills.filter(id => id !== 0);
  const submitParams = {
    skillList: selectedSkillIds.map(skillId => ({ skillId }))
  };

  console.log('最终提交参数', submitParams);
  // 此处调用接口提交submitParams即可
}

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