Angular响应式表单选单个控件清空其余项触发无限循环如何解决

触发无限循环的核心原因是：Angular Reactive Forms的setValue方法默认会触发被修改控件的valueChanges事件。你在单个控件的valueChanges回调里修改其他控件值时，会触发其他控件的valueChanges回调，回调里又反过来修改别的控件，形成闭环触发。
另外你现有代码还有逻辑错误：在vpr、state的订阅回调里，连当前触发事件的控件本身也执行了setValue([])，用户刚选中值就被清空，完全不符合「保留当前选中值、清空其余控件」的需求。

推荐两种实现方式，都可以彻底解决循环问题，按需选择即可。

方案1：给setValue配置emitEvent: false切断事件触发 #

setValue支持传入第二个配置参数，将emitEvent设为false时，本次赋值操作不会触发valueChanges事件，从根源切断循环链路。
可以先封装一个统一的重置方法，避免重复写冗余逻辑：

// 重置除当前激活筛选器外的所有控件值
private resetSiblingFilters(activeControl: 'vpr' | 'state' | 'age') {
  const filterGroup = this.filterForm.get('filters') as FormGroup;
  Object.keys(filterGroup.controls).forEach(controlKey => {
    if (controlKey !== activeControl) {
      // 关键配置：阻止本次赋值触发valueChanges事件
      filterGroup.get(controlKey)?.setValue([], { emitEvent: false });
    }
  });
}

之后在每个控件的valueChanges订阅里调用这个方法即可，注意不要再给当前控件本身执行清空操作：

this.getGroupControl('filters', 'vpr').valueChanges.pipe(
  takeUntil(this.$onDestroy)
).subscribe({
  next: (val) => {
    // 你的原有业务逻辑
    this.resetSiblingFilters('vpr');
  }
});

this.getGroupControl('filters', 'state').valueChanges.pipe(
  takeUntil(this.$onDestroy)
).subscribe({
  next: (val) => {
    // 你的原有业务逻辑
    this.resetSiblingFilters('state');
  }
});

this.getGroupControl('filters', 'age').valueChanges.pipe(
  takeUntil(this.$onDestroy)
).subscribe({
  next: (val) => {
    // 你的原有业务逻辑
    this.resetSiblingFilters('age');
  }
});

方案2：统一监听filters表单组变化，集中处理互斥逻辑 #

不用给每个子控件单独加订阅，直接监听filters表单组的valueChanges事件，统一判断当前有值的控件、清空其余控件，代码更易维护：

this.filterForm.get('filters')?.valueChanges.pipe(
  takeUntil(this.$onDestroy)
).subscribe({
  next: (formVal) => {
    const filterGroup = this.filterForm.get('filters') as FormGroup;
    // 找到当前已选中值的控件（互斥逻辑下同一时间仅会有一个控件有值）
    const activeKey = Object.entries(formVal).find(([_, val]) => Array.isArray(val) && val.length > 0)?.[0];
    if (!activeKey) return;
    // 清空其余控件，同样配置emitEvent: false
    Object.keys(filterGroup.controls).forEach(key => {
      if (key !== activeKey) {
        filterGroup.get(key)?.setValue([], { emitEvent: false });
      }
    });
  }
});

提示：如果你后续需要新增筛选项，方案2只需要在表单组初始化时加对应控件即可，不需要额外新增订阅逻辑，扩展性更好。

内容的提问来源于stack exchange，提问作者Jair León