Question

我开始在我的角度应用程序中使用基于模型的表单。到目前为止，我一直在使用基于模板的表单，并使用[(ngModel)]绑定我的数据。

我注意到在反应形式中使用[(ngModel)]是可能的，但我一直在堆栈上阅读这是一个不好的做法，但我无法在文档中找到（或遗漏）任何相关内容。< / p>

在使用反应形式时，是否应该避免使用？如果是这样，将数据绑定到输入的正确方法是什么？

现在我做这样的事情：

我的组件：

this.assignForm = this.fb.group({
    "balance": [null, Validators.required]
});

我的模板

<input type="text" formControlName="balance" [(ngModel)]="myData.Balance" />

Answer 1

您的问题标题和问题完全混淆了基于模型和被动反应，其中您的代码将两者结合使用。使用这两个组合结果绝对不能保证您看到的值和表单控制器包含的值相等。只是不要这样做。

正确的方法是：

this.assignForm = this.fb.group({
    "balance": [myData.Balance, Validators.required]
});

Answer 2

每个HTML输入元素都由一个名为FormControl的角度类包装。 FormBuilder显式创建FormControl。将NgModel放在元素上还会创建一个FormControl。

在您的示例中，同一元素有两个FormControl对象。

假设它们不会因名称冲突而失败（例如<input name="myname" formControlName="myname" [(ngModel)]="model.prop" />会向FormGroup注册我的名字两次），那么您可能会在valid/invalid/touched/dirty上得到不同的答案，具体取决于哪个查询。

在反应形式中使用[（ngModel）]是不是很糟糕的做法？

2 个答案: