我一直在阅读关于Angular2 new Forms API的文章,看起来表单有两种方法,一种是模板驱动的表单,另一种是响应式或模型驱动的表单。
我想知道这两者之间的实际差异,不是语法上的差异(显然),而是实际用途,以及哪种方法在不同的场景中更受益。 另外,选择其中一种是否会在性能上有所提高?如果是,为什么?
我一直在阅读关于Angular2 new Forms API的文章,看起来表单有两种方法,一种是模板驱动的表单,另一种是响应式或模型驱动的表单。
我想知道这两者之间的实际差异,不是语法上的差异(显然),而是实际用途,以及哪种方法在不同的场景中更受益。 另外,选择其中一种是否会在性能上有所提高?如果是,为什么?
当前回答
活性形式:
可重复使用, 更健壮的, 可测试的, 更加可伸缩
模板驱动的形式:
很容易添加, 更少的可伸缩, 基本表格要求
总之,如果表单对你的应用程序非常重要,或者应用程序中使用了响应式模式,你应该使用响应式表单。否则,你的应用程序有基本和简单的表单要求,如登录,你应该使用模板驱动的表单。
有一个棱角分明的官方链接
其他回答
下面是DeborahK (Deborah Kurata)解释的模板驱动和响应式表单之间的比较总结。
活性形式:
可重复使用, 更健壮的, 可测试的, 更加可伸缩
模板驱动的形式:
很容易添加, 更少的可伸缩, 基本表格要求
总之,如果表单对你的应用程序非常重要,或者应用程序中使用了响应式模式,你应该使用响应式表单。否则,你的应用程序有基本和简单的表单要求,如登录,你应该使用模板驱动的表单。
有一个棱角分明的官方链接
模板驱动表单:
使用FormsModule导入
用ngModel指令构建的表单只能在端到端测试中测试,因为这需要DOM的存在
表单值可以在两个不同的地方使用:视图模型和ngModel
表单验证,当我们向字段中添加越来越多的验证器标记,或者当我们开始添加复杂的跨字段验证时,表单的可读性会降低
反应形式:
能否一般用于大规模应用
复杂的验证逻辑实际上更容易实现
使用ReactiveFormsModule导入
表单值可以在两个不同的地方使用:视图模型和 FormGroup
易于单元测试: 我们可以通过实例化类,在表单控件中设置一些值,并对表单全局有效状态和每个控件的有效状态执行断言来实现这一点。
使用可观察对象进行响应式编程
例如:密码字段和密码确认字段需要相同
反应式方式:我们只需要编写一个函数,并将其插入到FormControl中
模板驱动方式:我们需要定义一个指令,并以某种方式将两个字段的值传递给它
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
我认为这是一个关于代码、策略和用户体验的讨论。
In summary we change from template-driven approach which is more easy to work with it, to reactive (in model-driven approach) for giving us more control, that results in a better testable form by leveraging a decoupling between the HTML (design/CSS team can work here) and component's business rules (angular/js specialist members) and to improve the user experience with features like reactive transformations, correlated validations and handle complex scenarios as runtime validation rules and dynamic fields duplication.
这篇文章是一个很好的参考: Angular 2表单——模板驱动和模型驱动方法
模板驱动的表单
使用方便 简单场景适用,复杂场景不适用 类似于AngularJS 双向数据绑定(使用[(NgModel)]语法) 最小组件代码 自动跟踪表单及其数据(由Angular处理) 单元测试是另一个挑战
反应式表单特点:
更灵活,但需要大量的练习 处理任何复杂场景 没有进行数据绑定(大多数开发人员首选的不可变数据模型) 更多的组件代码和更少的HTML标记 响应式转换可以实现,例如: 根据反弹时间处理事件 在组件是不同的情况下处理事件,直到更改 动态添加元素 更简单的单元测试