Angular输入框输入时报RangeError栈溢出错误该如何修复？

问题根因 #

当前代码触发死循环的核心原因是：修改input1的值触发valueChanges事件后，调用input2.setValue()会默认触发input2的valueChanges事件，反过来又会调用input1.setValue()，无限互相调用最终导致调用栈溢出。

修复方案 #

方案1：setValue时禁用事件触发（适用于需要保留两个独立FormControl的场景） #

调用setValue时传入配置项{emitEvent: false}，修改控件值时不会触发对应的valueChanges事件，即可切断循环链路，无需修改HTML代码，仅调整TS逻辑即可：

constructor() { }

input1:FormControl=new FormControl();
input2:FormControl=new FormControl();

ngOnInit(): void {
  this.input1.valueChanges
  .pipe(tap(value=>{
    // 设值时不触发valueChanges事件
    this.input2.setValue(value, {emitEvent: false});
  })).subscribe();

  this.input2.valueChanges
  .pipe(tap(value=>{
    // 设值时不触发valueChanges事件
    this.input1.setValue(value, {emitEvent: false});
  })).subscribe();
}

方案2：绑定同一个FormControl（适用于两个输入框值强同步的场景） #

如果业务没有要求两个输入框必须使用独立的FormControl实例，直接让两个输入框绑定同一个FormControl是最简洁的实现，不需要额外监听事件，天然实现值同步：

1. 修改app.component.html代码：

<div class="container-wrap">
    <div class="container">
        <input type="number" [formControl]="syncInput">
        <input type="number" [formControl]="syncInput">
    </div>
</div>

2. 修改app.component.ts代码：

constructor() { }
// 仅需声明一个FormControl实例
syncInput:FormControl=new FormControl();

ngOnInit(): void {
  // 无需额外的valueChanges监听逻辑
}

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