Angular7响应式表单中angular2-multiselect数据绑定失效问题

我来帮你排查并解决这个编辑下拉框为空的问题，咱们一步步来梳理：

核心问题分析 #

你当前的代码里同时混用了响应式表单的formControlName和模板驱动的[(ngModel)]，这两种绑定方式在响应式表单体系里是冲突的，会导致数据同步异常。另外，编辑表单时你没有正确把后端返回的属性数据初始化到FormArray对应的FormControl中，这才是下拉框空值的关键原因。

具体解决方案 #

1. 移除冗余的[(ngModel)]绑定 #

响应式表单中，FormControl已经全权负责数据的双向绑定，不需要再额外使用ngModel。修改你的模板代码：

<angular2-multiselect 
  [data]="validationTypeList" 
  formControlName="validation" 
  [settings]="dropdownValidationSettings">
</angular2-multiselect>

2. 编辑时正确初始化FormArray数据 #

当打开编辑表单时，需要把后端返回的属性数据逐个映射到FormArray的FormGroup中，确保每个validation控件都能拿到对应的值。新增一个初始化编辑表单的方法：

// 假设从后端获取的编辑数据为editFeatureData
initEditForm(editFeatureData: any) {
  // 先清空原有FormArray内容
  const attributesArray = this.addFeatureForm.get('attributes') as FormArray;
  attributesArray.clear();

  // 遍历后端返回的属性数据，逐个添加到FormArray
  editFeatureData.attributes.forEach((attr: any) => {
    attributesArray.push(this._fb.group({
      validation: [attr.validation, Validators.required] // 将后端值赋值给FormControl
      // 如果有其他字段，也需要在这里对应添加
    }));
  });

  // 给表单其他字段赋值
  this.addFeatureForm.patchValue({
    id: editFeatureData.id,
    name: editFeatureData.name,
    icon: editFeatureData.icon,
    type: editFeatureData.type,
    pattern: editFeatureData.pattern,
    matchType: editFeatureData.matchType,
    parent: editFeatureData.parent
  });
}

3. 修正addAttribute方法，保持结构一致 #

确保新增下拉框时创建的FormGroup结构和编辑时完全一致，这样新增和编辑的逻辑才能统一：

addAttribute() {
  const attributesArray = this.addFeatureForm.get('attributes') as FormArray;
  attributesArray.push(this._fb.group({
    validation: ['', Validators.required] // 初始值为空，可根据需求设置默认值
  }));
}

4. 检查angular2-multiselect的配置匹配度 #

确认你的dropdownValidationSettings配置中的primaryKey和labelKey与validationTypeList的数据结构完全匹配。比如你的数据是：

validationTypeList = [
  { id: 1, displayName: '必填验证' },
  { id: 2, displayName: '正则验证' }
];

那对应的settings应该配置为：

dropdownValidationSettings = {
  primaryKey: 'id',
  labelKey: 'displayName',
  // 其他自定义配置...
};

这样组件才能正确识别选中值并完成回显。

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