javascript - 使用 Angular 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">

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

我在选项卡式界面上使用控件，每个选项卡上都需要一个副本。有没有简单的方法让它们保持更新？

我有一个 working plunker demonstration.

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