Question

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

它完美无缺，但显然它不是正确的方法。

Answer 1

您可以使用此

收听表单更改

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

有关反应表单的详细信息，请查看此LINK

同样适用于您可以查找更改并相应操作的表单中的任何 FormControl

Answer 2

您可以像这样收听表单更改

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

或者您可以像这样监听formcontrol更改

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

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

2 个答案: