模板驱动和反应形式之间有什么实际区别?

gdy*_*tis 135 angular2-forms angular

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

我想知道两者之间的实际差异,不是语法上的差异(显然),而是实际用途,哪种方法在不同情况下有更多好处.另外,选择其中一个是否有性能提升?如果是,为什么?

Ara*_*ind 150

模板驱动的表单功能

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

反应表单功能

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

  • 提到反应形式时,“处理任何复杂的情况”到底是什么意思?来自AngularJS,我已经建立了复杂的表单,所以很难看到模板驱动的表单“对于复杂的场景失败” (10认同)
  • 我仍然不明白为什么 Angular 为同一件事提供了两种方法,这使得 Angular 初学者很难学习。 (3认同)
  • @danger89 我想是的。单元测试对于模板驱动表单来说是一个问题,因为它们是值更改,并且有效性检查是异步的,这在单元测试方面可能会引起麻烦。 (2认同)
  • 我会在上面的组合中添加 [表单验证](https://angular.io/guide/form-validation)。模板通过指令验证,其中反应性是按功能 (2认同)

Ric*_*Lee 22

我认为这是对代码,策略用户体验的讨论.

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

本文是一个很好的参考: Angular 2表单 - 模板驱动和模型驱动方法


Saj*_*ran 17

以下是DeborahK(Deborah Kurata)解释的模板驱动和反应形式之间的比较总结, 在此输入图像描述


abh*_*sen 9

了解反应式表单和模板驱动表单之间差异的最简单方法

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

在此输入图像描述

  • 谁能告诉我同步和异步形式在形式方面意味着什么? (4认同)
  • 反应式表单是同步的(当您从代码创建控件时)在反应式表单中,您可以在代码中创建整个表单控件树。您可以立即更新值或向下钻取父窗体的子窗体,因为所有控件始终可用。 (2认同)
  • 模板驱动表单是异步的(因为它委托创建控件的任务) 模板驱动表单将其表单控件的创建委托给指令。为了避免“检查后更改”错误,这些指令需要多个周期来构建整个控制树。这意味着您必须等待一段时间才能从组件类中操作任何控件。 (2认同)

fgu*_*gul 6

反应形式:

  • 可重复使用的,
  • 更健壮,
  • 可测试,
  • 更具可扩展性

模板驱动的表单:

  • 容易添加,
  • 可扩展性较差,
  • 基本形式要求

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

有角官方链接


小智 5

模板驱动表单:

使用 FormsModule 导入

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

表单值可以在两个不同的地方使用:视图模型,即 ngModel

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

反应形式:

一般可用于大规模应用

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

使用 ReactiveFormsModule 导入

表单值可以在两个不同的地方使用:视图模型和 FormGroup

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

使用 Observables 进行反应式编程

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

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

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

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