ngx-mat-select-search多选全选失效，FormControl未更新求助

1. 确认FormControl与mat-select的绑定有效性 #

首先检查mat-select和bankMultiCtrl的绑定是否正确，这是控件值同步的基础：

• 如果是独立控件，用[formControl]绑定：

<mat-select [formControl]="bankMultiCtrl" multiple>
  <!-- 选项内容 -->
</mat-select>

• 如果是表单组的一部分，确保formControlName与表单组中定义的控件名一致，且表单组已正确实例化：

// TS代码示例
bankForm = new FormGroup({
  bankMultiCtrl: new FormControl([])
});

<mat-select formControlName="bankMultiCtrl" multiple>
  <!-- 选项内容 -->
</mat-select>

2. 修正全选逻辑实现 #

全选功能需要手动更新FormControl的值，同时要适配ngx-mat-select-search的过滤结果（避免选中已被过滤隐藏的选项）。

TS代码调整 #

假设你有原始银行列表banks、过滤后的可观察列表filteredBanks$，按以下方式实现全选逻辑：

import { firstValueFrom } from 'rxjs';

// 定义变量
banks: Bank[] = [...]; // 所有银行数据
filteredBanks$: Observable<Bank[]>;
bankMultiCtrl = new FormControl([]);

// 全选切换函数
async toggleAllSelection() {
  const currentFilteredBanks = await firstValueFrom(this.filteredBanks$);
  const selectedValues = this.bankMultiCtrl.value || [];

  // 判断当前是否已全选过滤后的选项
  if (selectedValues.length === currentFilteredBanks.length && currentFilteredBanks.length > 0) {
    this.bankMultiCtrl.setValue([]);
  } else {
    // 选中所有过滤后的选项（若要选全部原始选项，替换为this.banks）
    const allValues = currentFilteredBanks.map(bank => bank.id); // 按实际数据结构调整value字段，比如用bank对象或id
    this.bankMultiCtrl.setValue(allValues);
  }
}

// 判断是否全选的辅助函数
async isAllSelected(): Promise<boolean> {
  const currentFilteredBanks = await firstValueFrom(this.filteredBanks$);
  const selectedCount = this.bankMultiCtrl.value?.length || 0;
  return selectedCount === currentFilteredBanks.length && currentFilteredBanks.length > 0;
}

HTML代码调整 #

将全选选项的点击事件和选中状态与上述函数绑定：

<mat-select [formControl]="bankMultiCtrl" multiple>
  <!-- 搜索框 -->
  <ngx-mat-select-search [formControl]="bankFilterCtrl" placeholderLabel="搜索银行"></ngx-mat-select-search>
  
  <!-- 全选选项 -->
  <mat-option (click)="toggleAllSelection()">
    <mat-checkbox [checked]="isAllSelected() | async">全选</mat-checkbox>
  </mat-option>
  
  <!-- 过滤后的银行选项 -->
  <mat-option *ngFor="let bank of filteredBanks$ | async" [value]="bank.id">
    {{ bank.name }}
  </mat-option>
</mat-select>

3. 处理选项值类型一致性 #

如果你的mat-option用对象作为[value]，需要在mat-select上添加compareWith函数，确保FormControl能正确识别选中项：

<mat-select [formControl]="bankMultiCtrl" multiple [compareWith]="compareBank">
  <!-- 选项内容 -->
</mat-select>

// 对比函数，根据实际数据结构调整
compareBank(a: Bank, b: Bank): boolean {
  return a.id === b.id;
}

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