Angular 4响应式表单中同步两个FormControl输入框的方法

嘿，这个问题我之前也碰到过！其实核心原因是：虽然两个输入框都通过formControlName关联到了同一个address表单控件，但当其中一个输入框触发输入时，Angular的视图变更检测有时候没及时把模型的最新值同步到另一个输入框上。下面给你几个靠谱的解决方案：

方法一：直接绑定控件实例（最推荐） #

这种方式跳过表单组的间接查找，让两个输入框直接绑定到同一个控件实例，能确保值实时同步。

组件代码： #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form!: FormGroup;
  // 单独声明控件实例
  addressControl = this.fb.control('');

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      // 将声明好的控件实例加入表单组
      address: this.addressControl
    });
  }
}

模板代码： #

<input type="text" class="form-control" placeholder="Address" [formControl]="addressControl">
<input type="text" class="form-control" placeholder="Address" [formControl]="addressControl">

方法二：订阅控件的valueChanges事件手动同步 #

如果你不想修改表单的声明方式，可以通过订阅控件的值变化事件，手动设置控件值（注意关闭事件触发避免循环）。

组件代码： #

ngOnInit(): void {
  this.form = this.fb.group({
    address: [""]
  });

  const addressCtrl = this.form.get('address');
  // 订阅值变化事件
  addressCtrl?.valueChanges.subscribe(value => {
    // 设置值时关闭emitEvent，防止触发新一轮订阅循环
    addressCtrl.setValue(value, { emitEvent: false });
  });
}

模板代码保持你原来的写法即可，这样当一个输入框修改值后，订阅事件会强制更新控件值，让另一个输入框同步。

方法三：混合使用ngModel（不推荐，但应急可用） #

不建议在Reactive Forms中混合使用模板驱动的ngModel，但如果只是临时解决问题，可以试试：

<input type="text" class="form-control" placeholder="Address" formControlName="address" [(ngModel)]="form.get('address')?.value">
<input type="text" class="form-control" placeholder="Address" formControlName="address" [(ngModel)]="form.get('address')?.value">

不过这种方式可能会导致表单状态管理混乱，所以优先推荐前两种方法。

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