Why isn't Angular syncing fields with the same formControlName?

Issue

I have two mat-select fields bound to the same formControlName within the same form using reactive forms. I would have thought that making a change in one would be reflected in the other, but this doesn't seem to be the case. Why is that? Does it have something to do with change detection?

Solution

I think you have to make 2 different formControl and you need subscribe the valueChanges. For example:

this.firstControl.valueChanges.subscribe(x => this.secondControl.setValue(x, {emitEvent: false}));

this.secondControl.valueChanges.subscribe(x => this.firstControl.setValue(x, {emitEvent: false}));

{ emitEvent: false } need, if you make it vice versa.

Answered By - mullern