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