如何将多个 select 组件绑定到单个 Angular 6+ 响应式表单而不发出重复更改

Question

我需要将多个输入组件绑定到一个 angular 反应形式，但我有两个问题：

开箱即用，仅更新发生用户输入的表单
如果我使用 [(ngModel)] 它可以工作，但它也会触发第二个更改事件

如何在不触发第二个事件的情况下使两个 select 组件与数据模型保持同步？

模板

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

分量

foo = '';
bar: FormControl; 
...
formControl.valueChanges.subscribe(data => ...//this is called two times)

Answer 1

在忽略事件的同时手动修补事件确实会将新值传播到模板中的每个绑定元素。

bar.valueChanges.subscribe(data => bar.patchValue(data , { emitEvent: false }))

如何将多个 select 组件绑定到单个 Angular 6+ 响应式表单而不发出重复更改

How to bind multiple select components to a single Angular 6+ reactive forms without emitting duplicate changes

typescript

angular

angular-reactive-forms