Angular：FormGroup内控件值变化时修改另一控件值遇栈溢出问题

你的问题出在监听了整个DepreciationConfigInfo FormGroup的valueChanges，当你在回调里设置DepreciationEnd的值时，会再次触发整个组的valueChanges事件，形成无限循环，最终导致栈溢出错误。

正确的做法是只监听你关心的两个控件——DepreciationPeriod和DepreciationStart的变化，这样设置DepreciationEnd不会触发监听流，避免循环。

修正后的代码 #

import { combineLatest } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';

// 获取目标控件
const depreciationPeriodCtrl = this.formGroup.get('DepreciationConfigInfo.DepreciationPeriod');
const depreciationStartCtrl = this.formGroup.get('DepreciationConfigInfo.DepreciationStart');

// 合并两个控件的变化流，任一控件变化都触发回调
combineLatest([
  depreciationPeriodCtrl?.valueChanges.pipe(startWith(depreciationPeriodCtrl?.value)),
  depreciationStartCtrl?.valueChanges.pipe(startWith(depreciationStartCtrl?.value))
]).pipe(takeUntil(this.destroy$))
.subscribe(() => {
  // 设置DepreciationEnd的值，{emitEvent: false}避免触发自身的valueChanges（可选，但更稳妥）
  this.formGroup.get('DepreciationConfigInfo.DepreciationEnd')?.setValue(5, { emitEvent: false });
});

关键说明 #

1. 避免监听整个FormGroup：只监听需要响应变化的控件，防止无关的控件值变化触发不必要的回调。
2. combineLatest的使用：合并两个控件的变化流，只要其中一个值发生变化，就会执行回调逻辑。
3. startWith操作符：确保组件初始化时，即使控件还没发生手动变化，也会触发一次回调，初始化DepreciationEnd的值。
4. emitEvent: false：设置值时禁止触发控件自身的valueChanges事件，进一步避免潜在的循环风险。

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