使用角度4中的ReactiveForms保持两个FormControl输入元素同步

Question

给定一个组件,带有表单声明

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

表单上的两个输入控件,两者都引用相同的控件.

<input type="text" class="form-control" placeholder="Address" formControlName="address">
<input type="text" class="form-control" placeholder="Address" formControlName="address">

如何在每个控件中保持输入值相同.更新每个输入元素确实会更改模型值,但不会更改其他相应的输入值.我确信这是设计的.

我在选项卡式界面上使用控件,每个选项卡上都需要重复.有没有简单的方法来保持更新？

我有一个工作的plunker演示.

Answer 1

只需在表单中添加值字段即可

<input type="text" class="form-control" [value]="form.value.address" placeholder="Address" formControlName="address">
<input type="text" class="form-control" [value]="form.value.address" placeholder="Address" formControlName="address">

看看这个plunker

Answer 2

如果组件引用了同一个表单，但它们在不同的部分（例如不同的模板），您可以订阅值更改事件来更新值。这对我有用：

class CustomComponent implements OnInit {

 @Input() formGroup: FormGroup;

 ngOnInit() {

 this.formGroup.controls['param'].valueChanges.subscribe(x=> {
       this.formGroup.controls['param'].setValue(x, {onlySelf: true, emitEvent: false});
    });

  }

}   

因此，如果您修改一个组件中的值，订阅将处理另一个组件中的更改。在emitEvent: false防止对在变化的无限循环进入。