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

【问题标题】：How to bind multiple select components to a single Angular 6+ reactive forms without emitting duplicate changes如何将多个选择组件绑定到单个 Angular 6+ 响应式表单而不会发出重复的更改
【发布时间】：2019-04-15 06:18:45
【问题描述】：

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

开箱即用，仅更新发生用户输入的表单
如果我使用 [(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)

【问题讨论】：

应该是[(ngModel)]="foo" 和bar.valueChanges...，打错了吗？
顺便说一句，同时使用ngModel 和formControl 指令的目的是什么？

标签： angular typescript angular-reactive-forms

【解决方案1】：

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

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

【讨论】：