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.

Jim · Accepted Answer · 2018-03-21 17:41:01Z

33

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

edited Mar 21, 2018 at 17:41

Jim

16.2k17 gold badges89 silver badges174 bronze badges

answered Mar 21, 2018 at 17:08

Obed Amoasi

2,0491 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jim Over a year ago

hah! thanks, can't believe it was so simple, and I missed it.

Mark Over a year ago

Cheers for that! Such a simple answer.

Titukedo · Accepted Answer · 2018-12-05 10:02:36Z

12

If the components have a reference to same form, but they are in different parts (different templates for example), you can subscribe the value change event to update the value. This works for me:

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});
    });

  }

}

So, if you modify the value in one component, the subscription will handle the changes in the other component. The emitEvent: false prevents to enter in a infinite loop on changes.

answered Dec 5, 2018 at 10:02

Titukedo

9701 gold badge14 silver badges29 bronze badges

5 Comments

Nate Anderson Over a year ago

Thanks! I like this solution. Is onlySelf: true important? From documentation: "onlySelf: When true, each change only affects this control, and not its parent. Default is false." I did not use it, but maybe it's a good idea

Eslam Sameh Ahmed Over a year ago

It is a working solution but there is must another elegant one.

user3819197 Over a year ago

I have used the accepted answer in the past with success for string and number "ui syncing". However, this answer solved my problem for a Date object (for example bsDatePicker from ng-bootstrap)

Daniel Kappacher Over a year ago

Thanks, worked. I had to use it to sync two primeNg input components (slider + number input) that make up the input component together. "value" property is not available and "ngModel" is deprecated

Max Over a year ago

Beware of this solution since it will cause an infinite loop. Since it is the same property which is accessed the emitEvent false and onlySelf true do not have any effect.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related