基于响应式表单实现Mat-Select全选及复选框不确定状态

我帮你把模板驱动的全选逻辑改成纯响应式表单实现，这样就能解决你遇到的值绑定问题了。下面是完整的实现方案：

核心实现思路 #

• 用FormControl替代NgModel来管理选中的选项集合
• 基于FormControl的当前值，实现全选状态和不确定状态的判断逻辑
• 处理全选复选框的点击事件，批量切换所有选项的选中状态

完整组件代码（TS） #

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-select-check-all',
  templateUrl: './select-check-all.component.html',
})
export class SelectCheckAllComponent {
  // 响应式表单控件，管理选中的选项值
  @Input() selectedItemsControl: FormControl = new FormControl([]);
  // 所有可选的选项列表
  @Input() values: any[] = [];
  // 全选复选框的显示文本
  @Input() text = '全选';

  // 判断是否处于不确定状态（部分选中）
  isIndeterminate(): boolean {
    const selected = this.selectedItemsControl.value || [];
    return selected.length > 0 && selected.length < this.values.length;
  }

  // 判断是否处于全选状态
  isChecked(): boolean {
    const selected = this.selectedItemsControl.value || [];
    return this.values.length > 0 && selected.length === this.values.length;
  }

  // 切换全选/取消全选状态
  toggleSelection(event: any): void {
    const isChecked = event.checked;
    this.selectedItemsControl.setValue(isChecked ? [...this.values] : []);
  }
}

模板代码（HTML） #

<mat-option>
  <mat-checkbox 
    class="mat-option"
    [indeterminate]="isIndeterminate()"
    [checked]="isChecked()"
    (click)="$event.stopPropagation()"
    (change)="toggleSelection($event)"
  >
    {{ text }}
  </mat-checkbox>
</mat-option>

使用示例（父组件） #

在父组件里，你需要定义自己的FormControl和选项列表，然后把组件嵌套在mat-select中：

<mat-form-field>
  <mat-label>选择选项</mat-label>
  <mat-select [formControl]="mySelectionControl" multiple>
    <!-- 全选组件 -->
    <app-select-check-all 
      [selectedItemsControl]="mySelectionControl"
      [values]="allOptions"
      text="全选所有选项"
    ></app-select-check-all>
    <!-- 普通选项 -->
    <mat-option *ngFor="let option of allOptions" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

父组件TS：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  mySelectionControl = new FormControl([]);
  allOptions = ['选项1', '选项2', '选项3', '选项4'];
}

关键细节说明 #

• 阻止事件冒泡：(click)="$event.stopPropagation()" 是为了避免点击全选复选框时触发mat-option的选中逻辑，确保只有复选框的change事件生效。
• 不确定状态逻辑：当选中的选项数量大于0且小于总选项数时，复选框显示为不确定状态。
• 响应式表单绑定：全程使用FormControl的value来获取和设置选中值，完全替代模板驱动的NgModel，避免值绑定冲突。

这样就能完美实现你要的功能，而且完全基于响应式表单，不会出现之前的绑定错误啦！

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