keeping two FormControl input elements in sync using ReactiveForms in angular 4

Question

Given a component, with a form declaration

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

An two input controls on a form, both referencing the same control.

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

How do I keep the input values the same in each of the controls. Updating each input element does change the model value, but not the other corresponding input value. I am sure this is by design.

I am using the control on a tabbed interface, that requires a duplicate on each tab. Is there an easy way to keep them updated?

I have a working plunker demonstration.

Answer 1

just add a value field to the form

<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">

check out this plunker