我一直在阅读有关 Angular2 新表单 API 的信息,似乎表单上有两种方法,一种是模板驱动的表单,另一种是反应式或模型驱动的表单。
我想知道两者之间的实际区别,而不是语法上的区别(显然),而是实际用途以及在不同场景中哪种方法更有益。此外,选择其中一个是否会提高性能?如果是,为什么?
模板驱动的表单功能
便于使用
适合简单场景,复杂场景失败
类似于 AngularJS
双向数据绑定(使用 [(NgModel)] 语法)
最少的组件代码
自动跟踪表单及其数据(由 Angular 处理)
单元测试是另一个挑战
反应形式特点
更灵活,但需要大量练习
处理任何复杂的场景
不进行数据绑定(大多数开发人员首选的不可变数据模型)
更多的组件代码和更少的 HTML 标记
可以进行反应性转换,例如根据去抖动时间处理事件 当组件不同时处理事件,直到发生变化 动态添加元素
根据去抖动时间处理事件
在组件不同时处理事件直到更改
动态添加元素
更简单的单元测试
https://i.stack.imgur.com/HZQlS.png
我认为这是关于代码、策略和用户体验的讨论。
总之,我们从更易于使用的模板驱动方法更改为响应式(在模型驱动方法中)以给予我们更多控制,从而通过利用 HTML(设计/ CSS 团队可以在这里工作)和组件的业务规则(angular/js 专家成员),并通过响应式转换、相关验证等功能改善用户体验,并处理运行时验证规则和动态字段复制等复杂场景。
这篇文章是一个很好的参考:Angular 2 Forms - Template Driven and Model Driven Approaches
反应形式:
可重复使用的,
更健壮,
可测试,
更具可扩展性
模板驱动的表单:
易于添加,
可扩展性较差,
基本形式要求
综上所述,如果表单对你的应用非常重要,或者你的应用中使用了响应式模式,你应该使用响应式表单。否则你的应用对表单有基本和简单的要求,例如登录,你应该使用模板驱动的表单。
There is a angular offical link
了解反应式表单和模板驱动表单之间区别的最简单方法
我可以说,如果您想要更多的控制和可扩展性,请使用响应式表单
https://i.stack.imgur.com/CA4Ge.png
模板驱动形式:
使用 FormsModule 导入
使用 ngModel 指令构建的表单只能在端到端测试中进行测试,因为这需要存在 DOM
表单值将在两个不同的地方可用:视图模型,即 ngModel
表单验证,当我们向字段添加越来越多的验证器标签时,或者当我们开始添加复杂的跨字段验证时,表单的可读性会降低
反应形式:
一般可用于大规模应用
复杂的验证逻辑其实更容易实现
使用 ReactiveFormsModule 导入
表单值将在两个不同的地方可用:视图模型和 FormGroup
易于单元测试:我们可以通过实例化类、在表单控件中设置一些值并对表单全局有效状态和每个控件的有效性状态执行断言来做到这一点。
使用 Observable 进行反应式编程
例如:密码字段和密码确认字段需要相同
Reactive 方式:我们只需要编写一个函数并将其插入 FormControl
模板驱动方式:我们需要定义一个指令并以某种方式将两个字段的值传递给它
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/