如何正确地与反应形式进行双向绑定？答案

【问题标题】：How to correctly 2-way-bind with reactive forms?如何正确地与反应形式进行双向绑定？
【发布时间】：2018-02-15 20:23:53
【问题描述】：

到目前为止，我一直认为您不应该将 [(ngModel)] 与响应式表单混合使用，而应简单地使用 formControlName。

但是，对我来说，它似乎不起作用？

我有一个表单，我向它添加了控件

this.exportForm.addControl("surcharge", new FormControl(this.details.SurchargeExtraField));

在我的 html 中，我输入 formControlName

    <div class="col-sm-12 col-md-6">
        <input type="text" formControlName="surcharge" />
    </div>

但是，当我使用输入时，它不会改变 this.details.SurchargeExtraField 的任何内容，它仅适用于验证。

当我这样做时：

<input type="text" formControlName="surcharge" [(ngModel)]="details.SurchargeExtraField" />

它工作得很好，但显然它不是正确的方法。

【问题讨论】：

标签： angular 2-way-object-databinding angular-reactive-forms

【解决方案1】：

你可以通过这个来监听表单的变化

  this.exportForm.valueChanges.subscribe((form) => {
     console.log(form);
   });

有关响应式表单的更多信息，请查看LINK

这同样适用于表单中的任何 FormControl，您可以查找更改并采取相应措施

【讨论】：

所以像[(ngModel)] 这样的“自动”2 路绑定对于反应形式是不可能的？
如果您看到表单正在动态更新的示例链接，那么您就完成了绑定，但它不像 ngModel 而是在 formControl 上使用 observables

【解决方案2】：

你可以像这样监听表单的变化

this.exportForm.valueChanges.subscribe((changes) => {
     console.log(changes);
});

或者你可以像这样监听表单控件的变化

this.exportForm.get('surcharge').valueChanges.subscribe((change) => {
     console.log(change);
});

或者你可以这样做

onChange (newVal) {
   console.log(newVal);
}

<input type="text" formControlName="surcharge" #surchargeInput (change)="onChange(surcharge.target.value)"/>

【讨论】：

“没有理由不像这样混合 formControlName 和 ngModel” - 除了行为在 Angular 6 中已被弃用，并将在 Angular 7 中消失。
您完全正确，但当时我回答是可能的。所以我现在要编辑我的答案。