将反应形式与模板形式混合 [英] Mixing Reactive Form with Template Form

问题描述

我使用模板表单构建了一个包含大量输入的大型表单.现在，我有了一个动态添加一部分输入的要求.由于使用Reactive Form动态添加输入似乎更容易，因此我想将输入的特定部分更改为Reactive Form.

I have built a big form with lots of input using Template Form. Now I have got a requirement to add a part of input dynamically. Since adding inputs dynamically seems easier with Reactive Form, I would like to change that specific part of inputs to Reactive Form.

那么可以将反应性表单和模板表单混合在同一表单标签中吗?

So is it possible to mix reactive forms and template forms in a same form tag?

推荐答案

您可以混合使用

You can mix both reactive forms and template driven forms, but it is highly not recommended. This is because using ngModel on reactive forms goes against the idea of immutability of the form state.

反应式表单的原理遵循单向"数据绑定规则，在此规则中，您遵循一种不变的方法来管理表单的状态，从而使模板和组件逻辑之间的关注点更加分离.您可以在第一段的链接上详细了解反应式表单的优点.

The principles of reactive forms follows the 'one-way' data binding rule, whereby you follow an immutable method of managing the state of your forms, such that there is greater separation of concern between your template and component logic. You can read more about the advantages of reactive forms on the link at the first paragraph.

假设您要继续混合使用模板驱动的表单和反应性表单.当您运行ng serve时，控制台将引发以下错误:

Assuming you are going ahead with mixing template driven forms and reactive forms. The console will throw the following error when you run ng serve:

似乎您在与formControlName相同的表单字段上使用ngModel.在Angular v6中已弃用对ngModel输入属性和ngModelChange事件以及反应形式指令的支持，而在Angular v7中将不再支持 有关更多信息，请参见此处的API文档: https://angular.io/api/forms/FormControlName#use-with-ngmodel

It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7 For more information on this, see our API docs here: https://angular.io/api/forms/FormControlName#use-with-ngmodel

这篇关于将反应形式与模板形式混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！