Angular中绑定同一FormControl的两个数字输入框值同步问题

问题根源 #

Angular默认会在输入框失去焦点时才更新FormControl的值，而非输入过程中实时更新。这就导致你修改其中一个输入框但未失焦时，另一个输入框不会同步显示新值。你添加的detectChanges()调用其实没必要，反而可能干扰正常的变更检测流程。

直接解决方法 #

初始化FormControl时指定updateOn: 'input'配置，让控件在输入过程中实时更新值，两个绑定同一控件的输入框就能实时同步：

maxNegative = new FormControl(0, { updateOn: 'input' });

同时可以移除valueChanges订阅里的this.cdr.detectChanges()代码，因为实时更新FormControl值后，Angular的默认变更检测会自动同步另一个输入框的显示。

特殊情况处理（OnPush模式） #

如果你的组件设置了ChangeDetectionStrategy.OnPush变更检测策略，需要让组件感知到值变化：

• 可以保留valueChanges订阅，将detectChanges()替换为markForCheck()，通知Angular检查组件变更：

  this.maxNegative.valueChanges.pipe(untilDestroyed(this)).subscribe(() => {
    this.cdr.markForCheck();
  });
  

这样就能解决两个输入框不同步的问题了。

内容的提问来源于stack exchange，提问作者Ortal Blumenfeld Lagziel