模板驱动和响应式表单之间的实际区别是什么？答案

【问题标题】：What are the practical differences between template-driven and reactive forms?模板驱动和响应式表单之间的实际区别是什么？
【发布时间】：2017-01-01 17:29:09
【问题描述】：

我一直在阅读有关 Angular2 新表单 API 的信息，似乎有两种表单方法，一种是模板驱动的表单，另一种是反应式或模型驱动的表单。

我想知道两者之间的实际区别，不是语法上的区别（显然），而是实际用途以及在不同场景中哪种方法更有利。此外，选择其中一个是否会提高性能？如果是，为什么？

【问题讨论】：

另外一点要考虑的是反应式表单是同步的，模板驱动的表单是异步的。两种形式都有自己的弱点和优势。因此在选择在您的应用程序中使用哪种形式之前需要考虑几件事。应用程序复杂性等。您也可以在应用程序中使用这两种形式。

标签： angular angular2-forms

【解决方案1】：

模板驱动的表单功能

易于使用
适用于简单场景，不适用于复杂场景
类似于 AngularJS
双向数据绑定（使用[(NgModel)]语法）
最少的组件代码
自动跟踪表单及其数据（由 Angular 处理）
单元测试是另一个挑战

反应式表单功能

更灵活，但需要大量练习
处理任何复杂的场景
不进行数据绑定（大多数开发人员首选不可变数据模型）
更多的组件代码和更少的 HTML 标记
可以进行反应性转换，例如
- 根据去抖时间处理事件
- 在组件不同时处理事件直到更改
- 动态添加元素
更简单的单元测试

【讨论】：

单元测试的缺点是否仍然适用于模板驱动表单？
@danger89 我想是的。单元测试对于模板驱动表单来说是一个问题的原因是因为它们是值更改并且有效性检查是异步的，这在单元测试方面可能会让人头疼。
我会在上面的组合中添加form validation。模板通过指令验证，其中响应式是按功能
在提到反应式表单时，“处理任何复杂的场景”到底是什么意思？来自 AngularJS，我已经很好地构建了复杂的表单，所以我很难看到模板驱动的表单如何“在复杂场景中失败”
@jtate 我同意你的观点 jtate ，有谁知道哪一个有助于提高性能、加载时间等？

【解决方案2】：

我认为这是关于代码、策略和用户体验的讨论。

总而言之，我们从 模板驱动 方法（使用它更容易使用）改为 反应式（在模型驱动方法中) 为我们提供了更多的控制权，通过利用 HTML（设计/CSS 团队可以在这里工作）和组件的业务规则（angular/js 专家成员）之间的解耦来生成更好的可测试表单，并改善用户体验，使用响应式转换、相关验证和处理复杂场景作为运行时验证规则和动态字段复制等功能。

这篇文章是一个很好的参考： Angular 2 Forms - Template Driven and Model Driven Approaches

【讨论】：

【解决方案3】：

这里是 DeborahK (Deborah Kurata) 很好解释的模板驱动和反应形式之间比较的总结，

【讨论】：

【解决方案4】：

反应形式：

可重复使用，
更健壮，
可测试，
更具可扩展性

模板驱动的表单：

易于添加，
可扩展性较差，
基本表单要求

总结，如果表单对您的应用非常重要，或者您的应用中使用了响应式模式，您应该使用响应式表单。否则您的应用具有基本和对登录等表单的简单要求，应该使用模板驱动的表单。

There is a angular offical link

【讨论】：

【解决方案5】：

了解响应式表单和模板驱动表单之间区别的最简单方法

我可以说，如果您想要更多的控制和可扩展性，请使用响应式表单

【讨论】：

谁能告诉我同步和异步形式在形式方面是什么意思？
响应式表单是同步的（当您从代码创建控件时）在响应式表单中，您可以在代码中创建整个表单控件树。您可以立即更新值或向下钻取父表单的后代，因为所有控件始终可用。
模板驱动的表单是异步的（因为它委托创建控件的任务）模板驱动的表单将其表单控件的创建委托给指令。为了避免“检查后更改”错误，这些指令需要一个以上的周期来构建整个控制树。这意味着在从组件类中操作任何控件之前，您必须等待一个滴答声。

【解决方案6】：

模板驱动的表单：

使用 FormsModule 导入

使用 ngModel 指令构建的表单只能在端到端测试中进行测试，因为这需要 DOM 的存在

表单值在两个不同的地方可用：视图模型，即 ngModel

表单验证，当我们向字段添加越来越多的验证器标签时，或者当我们开始添加复杂的跨字段验证时，表单的可读性会降低

反应形式：

一般可用于大规模应用

复杂的验证逻辑其实更容易实现

使用 ReactiveFormsModule 导入

表单值将在两个不同的地方可用：视图模型和表单组

易于单元测试：我们可以通过实例化类、在表单控件中设置一些值并针对表单全局有效状态和每个控件的有效性状态执行断言来做到这一点。

在反应式编程中使用 Observables

例如：密码字段和密码确认字段需要相同

Reactive 方式：我们只需要写一个函数并将其插入到 FormControl 中

模板驱动方式：我们需要定义一个指令并以某种方式将两个字段的值传递给它

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

【讨论】：

是否有偏好哪种表单类型适合较大的表单，例如 50 多个输入字段和 5-6 个这样的表单？