angular - 如何将多个选择组件绑定到单个 Angular 6+ 响应式表单而不会发出重复的更改

Question

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

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

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

模板

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

标签： angulartypescriptangular-reactive-forms

Answer 1

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

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