模板驱动和反应形式之间有什么实际差异？

Question

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

我想知道两者之间的实际差异，而不是语法上的差异（显然），但实际用途以及哪种方法在不同情况下的益处更多。 另外，选择其中一个是否有性能提升？如果有，为什么？

Answer 1

模板驱动的表单功能

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

反应表单功能

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

Answer 2

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

总之，我们改变了模板驱动的方法，更容易使用，被动（在模型驱动的方法中） ）为了给我们更多控制，通过利用HTML（设计/ CSS团队可以在这里工作）和组件的业务规则（angular / js专家成员）之间的分离，可以产生更好的可测试形式改善用户体验，使用反应式转换，相关验证和处理复杂方案等功能作为运行时验证规则和动态字段重复。

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

Answer 3

以下是DeborahK（Deborah Kurata）很好地解释的模板驱动形式和反应形式之间的比较摘要，

Answer 4

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

我可以说，如果您想使用Reactive表单来获得更多控制和可扩展性

Answer 5

模板驱动的表单：

使用FormsModule导入

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

表单值将在两个不同的位置可用：视图模型，即ngModel

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

活动表格：

通常可用于大规模应用

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

使用ReactiveFormsModule导入

表单值将在两个不同的位置可用：视图模型和 表格组

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

将Observables用于反应式编程

例如：密码字段和密码确认字段必须相同

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

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

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

Answer 6

反应形式：

• 可重复使用
• 更强大，
• 可测试的
• 更具可扩展性

模板驱动的表单：

• 易于添加，
• 可扩展性较低
• 基本表格要求

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

There is a angular offical link