Angular中单个FormControl绑定两个输入框不同步问题求解

问题重现 #

将单个FormControl绑定到两个输入框时，在其中一个输入框输入内容，另一个输入框并未实时同步更新。

组件代码：

@Component({
    selector: 'my-app',
    template: '<input [formControl]="ctrl"><input [formControl]="ctrl">',
})
export class AppComponent {
    ctrl = new FormControl('x', { updateOn: 'change' });
}

原因分析 #

问题核心在于updateOn: 'change'配置：

• Angular中updateOn参数用于指定**视图（输入框）值同步到模型（FormControl的value）**的时机。
• 当设置为'change'时，只有输入框触发change事件（即输入框失去焦点）时，才会将输入框的当前值同步到FormControl的value中。
• 在输入过程中（未失去焦点），FormControl的value仍保持初始值，因此第二个绑定同一FormControl的输入框不会同步更新。

而手动添加(input)事件调用patchValue时，会直接强制更新FormControl的value，跳过updateOn的限制，因此第二个输入框能实时同步。

解决方案 #

有两种可选方案：

方案1：移除updateOn配置（推荐） #

使用Angular默认的updateOn: 'input'配置，输入框内容会实时同步到FormControl，两个输入框自然实时同步：

ctrl = new FormControl('x');

方案2：保留updateOn并手动同步 #

如果需要保留updateOn: 'change'的同时实现实时同步，可绑定input事件手动更新FormControl（注意修正原代码的参数错误）：
模板代码：

<input [formControl]="ctrl" (input)="onChange($event)" />
<input [formControl]="ctrl" />

组件方法：

onChange(event: Event) {
    this.ctrl.patchValue((event.target as HTMLInputElement).value);
}

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