Angular表单组中某控件变化时如何更新所有控件值？

出现maximum call stack size exceeded错误的核心原因是：在valueChanges回调中调用setValue/patchValue时，默认会触发新的valueChanges事件，进而导致循环调用，最终栈溢出。解决的关键是设置控件值时禁用事件触发，同时精准控制同步逻辑。

基础实现：勾选/取消「All」同步其他复选框 #

修改你的ngOnInit代码，在设置其他控件值时添加{ emitEvent: false }选项，避免触发额外的事件循环：

import { FormGroup } from '@angular/forms';

ngOnInit(): void {
  this.setOptionControls('healthRisk', true);

  // 强类型转换确保类型安全
  const healthRiskGroup = this.filterForm.get('healthRisk') as FormGroup;
  const allControl = healthRiskGroup.get('All');
  // 筛选出除「All」外的所有控件名称
  const otherControlKeys = Object.keys(healthRiskGroup.controls).filter(key => key !== 'All');

  allControl?.valueChanges.subscribe((isAllChecked: boolean) => {
    // 遍历同步其他控件值，禁用事件触发
    otherControlKeys.forEach(key => {
      healthRiskGroup.get(key)?.patchValue(isAllChecked, { emitEvent: false });
    });
  });
}

扩展：反向同步（其他控件取消时自动取消「All」） #

如果需要实现双向同步——当任意一个子复选框被取消时，「All」自动取消勾选，可以添加以下逻辑：

import { merge } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

// 接上面的代码继续添加
merge(...otherControlKeys.map(key => healthRiskGroup.get(key)!.valueChanges))
  .pipe(
    debounceTime(10), // 避免多个控件同时变更时重复触发
    map(() => {
      // 检查所有子控件是否都处于勾选状态
      return otherControlKeys.every(key => healthRiskGroup.get(key)?.value === true);
    })
  )
  .subscribe(isAllSubChecked => {
    allControl?.patchValue(isAllSubChecked, { emitEvent: false });
  });

关键说明 #

• { emitEvent: false }：设置控件值时不会触发valueChanges事件，从根源上避免了循环调用导致的栈溢出问题。
• 强类型转换：将AbstractControl转为FormGroup，避免类型报错，提升代码健壮性。
• merge操作符：合并多个控件的valueChanges流，统一处理反向同步逻辑。

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