使用Angular响应式表单时选中select特定选项如何返回空数组

实现方案 #

第一步：修正控件类型错误 #

现有代码中clientsControl的类型声明错误，多选选择器绑定的是FormControl而非FormGroup，先修正该问题避免后续类型报错：

get clientsControl() {
  // 将 FormGroup 修改为 FormControl
  return this.messageForm.get(this.CLIENTS_FIELD) as FormControl;
}

第二步：修改valueChanges监听逻辑 #

在原有判断基础上新增仅选中全选选项（返回值为['']）的处理分支，直接将值替换为空数组即可：

this.mf.clientsControl.valueChanges.subscribe((value) => {
  // 新增判断：仅选中全选选项时直接返回空数组
  if (value.length === 1 && value[0] === '') {
    value = [];
  } else if (value.includes('') && value.length > 1) {
    // 原有混合选中场景的逻辑保持不变
    if (value.indexOf('') === value.length - 1) {
      value = value.filter((val) => val === '');
    } else {
      value = value.filter((val) => val !== '');
    }
  }
  this.mf.clientsControl.patchValue(value, { emitEvent: false });
});

第三步：调整表单校验规则（可选） #

如果你当前CLIENTS_FIELD使用了Validators.required校验，空数组会被判定为不合法，因为默认required校验会将空数组识别为空值。如果需要让全选对应的空数组通过校验，可以替换为自定义校验规则：

// 自定义校验：只要值不为null/undefined即判定为合法
const clientsRequired = (control: AbstractControl) => {
  return control.value == null ? { required: true } : null;
};

this.messageForm = this.fb.group({
  [this.TITLE_FIELD]: ['', Validators.required],
  [this.BODY_FIELD]: ['', Validators.required],
  [this.DATE_FIELD]: [null, Validators.required],
  // 替换原有Validators.required为自定义校验
  [this.CLIENTS_FIELD]: [[], clientsRequired],
});

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