I am facing an issue where I need to connect multiple input components to a single angular reactive form, but encounter two main obstacles:
- By default, only the form in which user input occurs gets updated
- If I use [(ngModel)] it does work, but it triggers an additional change event
Is there a way to synchronize two select components with the data model without causing a second event to trigger?
template
<select [(ngModel="foo")] [formControl]="bar">
<option *ngFor="let foo in foos" [value]="foo.value"> {{foo.name}}</option>
</select>
<select [(ngModel="foo")] [formControl]="bar">
<option *ngFor="let foo in foos" [value]="foo.value"> {{foo.name}}</option>
</select>
component
foo = '';
bar: FormControl;
...
formControl.valueChanges.subscribe(data => ...//this is called two times)