如何让Ng-multiselect-dropdown通过formControlName传递全量字段？

方案1：利用组件事件同步完整选中对象 #

注意不要同时使用[(ngModel)]和formControlName，Angular中两种绑定方式会冲突，先移除[(ngModel)]绑定。

步骤1：修改HTML模板，添加事件监听 #

<ng-multiselect-dropdown
  formControlName="benefitId"
  class="form-control"
  [placeholder]="'Benefits'"
  [data]="BenefitList.Info"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="onItemDeSelect($event)"
  (onSelectAll)="onSelectAll($event)"
  (onDeSelectAll)="onDeSelectAll()"
>
</ng-multiselect-dropdown>

步骤2：在TS中处理事件，同步完整对象 #

// 存储完整的选中项数组
selectedBenefits: any[] = [];

// 初始化表单（示例）
yourForm = this.formBuilder.group({
  benefitId: [this.selectedBenefits]
});

// 选中单个项时
onItemSelect(item: any) {
  const fullItem = this.BenefitList.Info.find(b => b.benefitId === item.benefitId);
  if (fullItem && !this.selectedBenefits.some(b => b.benefitId === fullItem.benefitId)) {
    this.selectedBenefits.push(fullItem);
    this.yourForm.get('benefitId')?.setValue([...this.selectedBenefits]);
  }
}

// 取消单个项时
onItemDeSelect(item: any) {
  this.selectedBenefits = this.selectedBenefits.filter(b => b.benefitId !== item.benefitId);
  this.yourForm.get('benefitId')?.setValue([...this.selectedBenefits]);
}

// 全选时
onSelectAll(items: any[]) {
  this.selectedBenefits = items
    .map(item => this.BenefitList.Info.find(b => b.benefitId === item.benefitId))
    .filter(Boolean);
  this.yourForm.get('benefitId')?.setValue([...this.selectedBenefits]);
}

// 取消全选时
onDeSelectAll() {
  this.selectedBenefits = [];
  this.yourForm.get('benefitId')?.setValue([]);
}

方案2：启用组件的完整对象返回配置（版本依赖） #

如果你的ng-multiselect-dropdown版本较新，可直接在dropdownSettings中添加returnFullObject: true，组件会自动返回完整选中对象：

this.dropdownSettings = {
  singleSelection: false,
  idField: 'benefitId',
  textField: 'name',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 1,
  allowSearchFilter: true,
  returnFullObject: true // 新增配置
};

替代多选组件推荐 #

如果上述方案不符合需求，可考虑以下成熟组件：

Angular Material MatSelect #

官方组件，稳定性高，直接绑定完整对象即可：

<mat-select formControlName="benefitId" multiple placeholder="Benefits">
  <mat-option *ngFor="let benefit of BenefitList.Info" [value]="benefit">
    {{ benefit.name }}
  </mat-option>
</mat-select>

绑定[value]="benefit"后，formControl会直接返回包含所有字段的选中项数组。

PrimeNG Dropdown #

功能丰富，支持多选、搜索等，默认返回完整对象：

<p-dropdown 
  formControlName="benefitId" 
  [options]="BenefitList.Info" 
  optionLabel="name" 
  multiple 
  placeholder="Benefits">
</p-dropdown>

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