Angular响应式表单：绑定同一控件到多输入框时其他输入框不刷新

我之前也踩过这个Angular响应式表单的坑！当你把同一个formControlName绑定到多个输入框时，确实会出现模型更新了但其他输入框没同步的问题——这是因为Angular默认会把FormControl和第一个绑定的输入框视图做关联，后续的输入框只会单向把值传给模型，不会主动监听模型的变化来更新自身视图。

你用(change)事件手动触发setValue的办法虽然能临时解决，但change事件是在输入框失去焦点时才触发的，实时性不够好，而且代码也有点冗余。下面给你两种更优雅的解决方式：

方法一：直接绑定FormControl实例（推荐） #

如果你的表单结构允许，直接在组件里定义FormControl实例，然后用[formControl]绑定到所有输入框，这样所有输入框都会和同一个控件实例双向绑定，自动同步：

组件代码 #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-test-form',
  templateUrl: './test-form.component.html'
})
export class TestFormComponent {
  testControl = new FormControl('初始值');
}

模板代码 #

<input type="text" [formControl]="testControl" id="in1">
<input type="text" [formControl]="testControl" id="in2">

不管你编辑哪个输入框，另一个都会实时同步更新，完全不需要额外的事件处理，这是最简洁可靠的方案。

方法二：针对FormGroup中的控件同步视图 #

如果你的控件是嵌套在FormGroup里，必须使用formControlName，那可以通过监听控件的valueChanges事件，手动触发所有输入框的视图更新：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-test-form',
  templateUrl: './test-form.component.html'
})
export class TestFormComponent implements OnInit {
  myForm = new FormGroup({
    test: new FormControl('初始值')
  });

  ngOnInit(): void {
    this.myForm.get('test')?.valueChanges.subscribe(() => {
      // 手动触发控件的视图更新，同步所有绑定的输入框
      this.myForm.get('test')?.updateValueAndValidity({ emitEvent: false });
    });
  }
}

模板代码 #

<form [formGroup]="myForm">
  <input type="text" formControlName="test" id="in1">
  <input type="text" formControlName="test" id="in2">
</form>

这里通过updateValueAndValidity({ emitEvent: false })强制控件更新所有关联的视图，同时避免触发新一轮的valueChanges事件，防止循环调用。

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