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

user_64279 0
Viewed 89

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?

angular-material angular
2 Answers

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.

user_92615520

For me, the easer way is not to have two inputs with the same formControlName. Use one input with formControlName and the another using ngModel

<input formControlName="control">
<input [ngModel]="myForm.get('control').value"
       (ngModelChange)="myForm.get('control').setValue($event)"
       [ngModelOptions]="{standalone:true}">
user_85581860
Related