Angular响应式表单中，如何让Material复选框响应值的程序化变更？

我之前也碰到过一模一样的情况，核心问题在于你可能只是修改了数据对象里的selected属性，但没同步更新响应式表单控件的value——Angular Material的mat-checkbox是和FormControl绑定的，它只认表单控件的状态，不会自动感知原始数据对象的变化。

下面是一套完整的实现方案，适配你的场景：

1. 梳理表单结构（组件类） #

假设你的表单是一个包含rows（FormArray）的FormGroup，每一行是一个包含selected复选框控件的FormGroup：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单
    this.myForm = this.fb.group({
      rows: this.fb.array([])
    });
  }

  // 快捷获取rows FormArray
  get rows(): FormArray {
    return this.myForm.get('rows') as FormArray;
  }
}

2. 实现添加行的方法 #

确保每一行的selected控件默认初始化为false：

addRow() {
  const newRowGroup = this.fb.group({
    selected: false,
    // 这里添加你需要的其他表单字段，比如name, age等
  });
  this.rows.push(newRowGroup);
}

3. 核心：全选/取消全选逻辑 #

关键是要遍历FormArray里的每一个FormGroup，直接更新selected控件的value，这样mat-checkbox会自动同步状态：

toggleAllSelected(isChecked: boolean) {
  // 遍历所有行控件，设置selected的值
  this.rows.controls.forEach(rowGroup => {
    // 使用setValue更新控件值，emitEvent: false可以避免触发多余的valueChanges事件
    rowGroup.get('selected')?.setValue(isChecked, { emitEvent: false });
  });
}

4. 判断是否所有行都被选中 #

用来同步全选复选框的状态：

isAllSelected(): boolean {
  const totalRows = this.rows.length;
  // 统计已选中的行数
  const selectedCount = this.rows.controls.filter(row => row.get('selected')?.value).length;
  // 只有当总行数>0且选中数等于总行数时，才返回true
  return totalRows > 0 && selectedCount === totalRows;
}

5. 模板部分（HTML） #

把全选复选框和行内复选框正确绑定到表单控件：

<!-- 全选复选框 -->
<mat-checkbox 
  [checked]="isAllSelected()"
  (change)="toggleAllSelected($event.checked)">
  全选
</mat-checkbox>

<!-- 添加行按钮 -->
<button mat-button (click)="addRow()">添加行</button>

<!-- 表单数组行列表 -->
<div [formGroup]="myForm">
  <div formArrayName="rows">
    <div *ngFor="let row of rows.controls; let i = index" [formGroupName]="i">
      <mat-checkbox formControlName="selected"></mat-checkbox>
      <!-- 这里添加其他表单控件，比如：
      <input formControlName="name" placeholder="名称">
      -->
    </div>
  </div>
</div>

额外说明 #

• 如果你的表单是从外部数据初始化的（比如后端接口返回的列表），一定要通过FormBuilder把数据映射到FormArray的控件里，而不是直接修改原始数据：

  initFormWithData(initialData: any[]) {
    const rowControls = initialData.map(item => this.fb.group({
      selected: item.selected,
      name: item.name,
      // 其他字段对应映射
    }));
    this.myForm.setControl('rows', this.fb.array(rowControls));
  }
  

• 如果你需要监听行内复选框的变化来自动更新全选状态，不需要额外订阅，因为模板里的isAllSelected()会在每次表单值变化时自动调用更新视图。

这样修改后，点击全选复选框时，所有行的复选框状态会和表单控件值同步，全选框的状态也会根据所有行的选中情况自动更新。

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