Angular - FormGroup 踩坑合辑之：两个相同的 formControlName 值不一致

如果两个 input 框绑定了同一个 FormControl，执行操作 2、3、4 时，会发现两个 input 框显示的内容未保持一致：

1. group.get(‘name’).setValue(‘Lorie’);
2. 用户点击第一个 input 并接着输入 1 ；
3. 用户点击第二个 input 并接着输入 2；
4. 用户点击第一个 input 并清空内容；
5. group.get(‘name’).setValue(‘Corey’);

<div [formGroup]="group">
	<input formControlName="name" type="text">
	<input formControlName="name" type="text">
</div>

const group = new FormGroup({
	name: new FormControl()
});

若想要使两个 input 框内容始终保持同步，解决方法有以下几种：

• 方法1：使用 ngModel

  <input [(ngModel)]="name" type="text">
  <input [(ngModel)]="name" type="text">
  

• 方法2：使用不同的 formControl 各自监听 valueChanges，互相改变对方的值

  <div [formGroup]="formGroup">
  	<input formControlName="name1" type="text">
  	<input formControlName="name2" type="text">
  </div>
  

  const control1 = this.formGroup.get('name1');
  const control2 = this.formGroup.get('name2');
  control1.valueChanges.subscribe(res => {
  	 control2.setValue(res);
  });
  control2.valueChanges.subscribe(res => {
  	 control1.setValue(res);
  });
  

• 方法3（推荐）：保留原代码设计思路，仅需监听 valueChanges 并使用 setValue(VALUE, { eventEmit: false })即可。

  const control = this.formGroup.get('name');
  control.valueChanges.subscribe(res => {
  	control.setValue(res, { emitEvent: false });
  });