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

到目前为止，我一直认为你不应该混合使用[(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" />

它工作完美，但显然这不是正确的方法。

您可以使用此监听表单更改

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

有关反应式表单的更多信息，请检查此LINK https://rahulrsingh09.github.io/AngularConcepts/reactive

这同样适用于任何表单控件在表格中您可以寻找变化并采取相应的行动