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

我一直在阅读关于Angular2 new Forms API的文章,看起来表单有两种方法,一种是模板驱动的表单,另一种是响应式或模型驱动的表单。

我想知道两者之间的实际区别,不是语法上的区别(显然),而是实际用途,以及哪种方法在不同的情况下更受益。 另外,选择其中一种是否会在性能上有所提高?如果是,为什么?< / p >

107232 次浏览

模板驱动的表单特点:

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

反应式表单特点:

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

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

总之,我们从模板驱动的方法(带有它的更容易工作),到无功(模型驱动方法),得到更多的控制,通过利用HTML(设计/CSS团队可以在这里工作)和组件的业务规则(angular/js专家成员)之间的解耦,从而得到更好的可测试形式,到改善用户体验,具有响应式转换、相关验证和处理复杂场景作为运行时验证规则和动态字段复制等特性。

这篇文章是一个很好的参考: Angular 2表单——模板驱动和模型驱动方法 < / p >
下面是模板驱动和响应式表单之间的比较总结,由DeborahK (Deborah Kurata)解释。 enter image description here < / p >

活性形式:

  • 可重复使用,
  • 更健壮的,
  • 可测试的,
  • 更加可伸缩

模板驱动的形式:

  • 很容易添加,
  • 更少的可伸缩,
  • 基本表格要求

在总结,如果表单对你的应用程序非常重要,或者应用程序中使用响应式模式,你应该使用活性形式。否则,你的应用程序有基本和简单的表单要求,如登录,你应该使用模板驱动的形式

< a href = " https://angular。io/guide/forms-overview" rel="noreferrer">有一个angular的官方链接

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

我可以说,如果你想要更多的控制和可伸缩性,那么就使用响应式表单

enter image description here

模板驱动表单:

使用FormsModule导入

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

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

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

反应形式:

能否一般用于大规模应用

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

使用ReactiveFormsModule导入

表单值将在两个不同的地方可用:视图模型和 FormGroup < / p > 易于单元测试: 我们可以通过实例化类,在表单控件中设置一些值,并对表单全局有效状态和每个控件的有效状态执行断言来实现这一点

使用可观察对象进行响应式编程

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

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

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

< a href = " https://blog.angular-university。io / introduction-to-angular-2-forms-template-driven-vs-model-driven noreferrer“rel = > https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/ < / >