ChatGPT解决这个技术问题 Extra ChatGPT

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

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

我想知道两者之间的实际区别,而不是语法上的区别(显然),而是实际用途以及在不同场景中哪种方法更有益。此外,选择其中一个是否会提高性能?如果是,为什么?

要考虑的另一点是反应式表单是同步的,而模板驱动的表单是异步的。两种形式都有自己的弱点和优势。因此在选择在您的应用程序中使用哪种形式之前需要考虑几件事。应用程序复杂性等。您也可以在应用程序中使用这两种形式。

i
isherwood

模板驱动的表单功能

便于使用

适合简单场景,复杂场景失败

类似于 AngularJS

双向数据绑定(使用 [(NgModel)] 语法)

最少的组件代码

自动跟踪表单及其数据(由 Angular 处理)

单元测试是另一个挑战

反应形式特点

更灵活,但需要大量练习

处理任何复杂的场景

不进行数据绑定(大多数开发人员首选的不可变数据模型)

更多的组件代码和更少的 HTML 标记

可以进行反应性转换,例如根据去抖动时间处理事件 当组件不同时处理事件,直到发生变化 动态添加元素

根据去抖动时间处理事件

在组件不同时处理事件直到更改

动态添加元素

更简单的单元测试


单元测试的缺点是否仍然适用于模板驱动表单?
@danger89 我想是的。单元测试对于模板驱动的表单来说是一个问题的原因是因为它们是值更改并且有效性检查是异步的,这在单元测试方面可能会让人头疼。
我会在上面的组合中添加 form validation。模板通过指令验证,其中响应式是按功能
当提到反应形式时,“处理任何复杂的场景”到底是什么意思?来自 AngularJS,我已经很好地构建了复杂的表单,所以我很难看到模板驱动的表单如何“在复杂场景中失败”
@jtate 我同意你的观点 jtate ,有没有人知道哪一个有助于提高性能、加载时间等?
n
naveen

https://i.stack.imgur.com/HZQlS.png


d
developer033

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

总之,我们从更易于使用的模板驱动方法更改为响应式(在模型驱动方法中)以给予我们更多控制,从而通过利用 HTML(设计/ CSS 团队可以在这里工作)和组件的业务规则(angular/js 专家成员),并通过响应式转换、相关验证等功能改善用户体验,并处理运行时验证规则和动态字段复制等复杂场景。

这篇文章是一个很好的参考:Angular 2 Forms - Template Driven and Model Driven Approaches


f
fgul

反应形式:

可重复使用的,

更健壮,

可测试,

更具可扩展性

模板驱动的表单:

易于添加,

可扩展性较差,

基本形式要求

综上所述,如果表单对你的应用非常重要,或者你的应用中使用了响应式模式,你应该使用响应式表单。否则你的应用对表单有基本和简单的要求,例如登录,你应该使用模板驱动的表单。

There is a angular offical link


a
abhinav

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

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

https://i.stack.imgur.com/CA4Ge.png


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

模板驱动形式:

使用 FormsModule 导入

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

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

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

反应形式:

一般可用于大规模应用

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

使用 ReactiveFormsModule 导入

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

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

使用 Observable 进行反应式编程

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

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

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

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


是否偏好哪种表单类型适合较大的表单,例如 50 多个输入字段和 5-6 个此类表单?