模板驱动表单和响应式表单有哪些实际的区别？

Question

我一直在阅读关于Angular2新的表单API的内容，看起来有两种处理表单的方法，一种是基于模板的表单，另一种是响应式或基于模型驱动的表单。

我想知道这两种方法之间的实际区别，不是语法上的差异（显然），而是在不同场景下哪种方法更有利并且实际用途如何。 此外，选择其中一种方法是否会带来性能提升？如果是，为什么？

- gdyrrahitis

---

另一个需要考虑的问题是响应式表单是同步的，而模板驱动表单是异步的。这两种表单都有各自的优点和缺点。因此，在选择要在您的应用程序中使用哪种表单之前，需要考虑几个因素，例如应用程序复杂性等。您也可以在应用程序中同时使用这两种表单。 - Vijay Singh

Answer 1

模板驱动表单功能:

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

响应式表单功能:

• 更加灵活，但需要大量实践
• 处理任何复杂场景
• 没有进行数据绑定（大多数开发者偏爱不可变的数据模型）
• 需要编写更多的组件代码和较少的HTML标记
• 可以实现响应式转换，例如：
  • 基于防抖时间处理事件
  • 在组件不同直到改变时处理事件
  • 动态添加元素
• 更容易进行单元测试

- Aravind

---

模板驱动表单是否仍然存在单元测试的缺点？ - Melroy van den Berg

@danger89 我也这么认为。模板驱动表单的单元测试存在问题的原因是它们是值更改，而有效性检查是异步的，这可能会在进行单元测试时带来麻烦。 - Alex Lockwood

我会在上述混合中添加表单验证。模板通过指令进行验证，而响应式则通过函数进行验证。 - Kieran

在响应式表单中，“处理任何复杂场景”是什么意思？由于我之前使用过AngularJS构建过复杂表单，所以很难理解模板驱动表单“在复杂场景下失败”的说法。请注意，我的翻译可能会根据上下文而略有不同。 - jtate

我仍然不明白为什么Angular会针对同一件事情提供两种方法，这让初学者很难学。 - vinesh_dodiya

Answer 2

这里是DeborahK（Deborah Kurata）解释的模板驱动和响应式表单之间比较的摘要，

- Sajeetharan

Answer 3

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

总体而言，我们从模板驱动的方法转变为响应式（模型驱动）方法，这样更易于操作，并且能够给我们更多的控制，从而通过在 HTML（设计/CSS团队可以在此工作）与组件业务规则之间实现解耦来实现更好的可测试性，并使用响应式转换、相关验证以及处理复杂场景（如运行时验证规则和动态字段复制）等功能来提高用户体验。

这篇文章是一个很好的参考： Angular 2 表单 - 模板驱动和模型驱动方法。

- Richard Lee

Answer 4

响应式表单：

• 可重复使用，
• 更加强大，
• 可测试，
• 更加可扩展。

模板驱动表单：

• 易于添加，
• 不太可扩展，
• 基本的表单要求。

简而言之，如果表单对您的应用程序非常重要，或者您的应用程序使用响应式模式，则应使用响应式表单。否则，如果您的应用程序对表单有基本和简单的要求，例如登录，则应使用模板驱动表单。

这是一个官方的 Angular 链接

- fgul

Answer 5

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

如果你想要更多的控制和可扩展性，我可以说选择响应式表单。

- abhinav

---

请问有人能告诉我同步和异步表单的含义吗？ - Akash Kumar

响应式表单是同步的（因为您从代码中创建控件）。在响应式表单中，您可以通过代码创建整个表单控件树。由于所有控件始终可用，因此您可以立即更新值或深入到父表单的后代中。 - abhinav

模板驱动表单是异步的（因为它委托控件的创建任务）。模板驱动表单将其表单控件的创建委托给指令。为了避免“已检查后更改”错误，这些指令需要多个周期来构建整个控件树。这意味着在组件类中操作任何控件之前，必须等待一个时钟周期。 - abhinav

Answer 6

模板驱动表单：

使用FormsModule导入

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

表单值将会出现在两个不同的位置：视图模型即ngModel

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

响应式表单：

通常用于大规模的应用程序

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

使用ReactiveFormsModule导入

表单值将会出现在两个不同的位置：视图模型和FormGroup

易于单元测试: 只需实例化类，设置一些表单控件的值，并对表单全局有效状态和每个控件的有效状态执行断言即可。

使用Observables进行反应式编程

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

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

模板驱动方式：我们需要定义一个指令，然后以某种方式传递两个字段的值

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

- LalithSwarna

---

有没有偏好的表单类型适用于更大的表单，例如具有50个以上输入字段和5-6个这样的表单？ - Asish