Angular 2中的模板驱动形式和反应形式有啥区别

Posted 2023-03-13

【中文标题】Angular 2中的模板驱动形式和反应形式有啥区别

【英文标题】：What are the differences between template driven forms and reactive forms in angular 2Angular 2中的模板驱动形式和反应形式有什么区别

【发布时间】：2017-12-29 20:03:27

【问题描述】：

在 Angular 2 中，模板驱动的表单和反应式表单有什么区别。在哪些情况下我们需要使用模板驱动表单和响应式表单

【问题讨论】：

angular.io/guide/forms

What are the practical differences between template-driven and reactive forms?的可能重复

【参考方案1】：

我们可以这么说

反应式可用于以下情况

具有更多字段的复杂表单。 有多个复杂的验证。需要自定义验证 要求 JSON 结构与表单中的值一起发送。

我们可以通过使用“form.value”以结构化的方式获取整个表单

如果我们有 4 个字段 First Name、Last Name、Email、Phone Number 以反应形式。

html 代码将是

<form [formGroup]="form">
    First Name <input formControlName="firstName">
    Last Name <input formControlName="lastName">
    Email <input formControlName="email">
    Phone Number <input formControlName="phoneNumber">
</form>

我们可以从下面的表格中获取值

"firstName": "FName",
"lastName": "LName",
"email": "[e-mail]",
"phoneNumber": "123"

通过调用form.value，其中form是我们创建的FormGroup变量。

模板驱动表单： 它可以在使用简单表格时使用。喜欢登录页面。 具有两种方式的数据绑定。我们可以简单地从 ui 为变量赋值，反之亦然。

简单的例子是如果我们为以下输入提供两种方式绑定。

<input [(ngModel)]="username">

我们可以简单地显示用户在 UI 中给出的值。

<p>Hello username!</p>

【讨论】：

示例对理解 +1 有很大帮助

【参考方案2】：

使用模板驱动方法，您基本上可以在模板中应用指令，例如 ngModel。基于这些指令，Angular 将创建表单控件对象。这种方法适用于构建具有基本验证（必需、最小长度、最大长度...）的简单表单。

使用响应式方法，您基本上需要在组件中创建表单控件和表单控件组的新实例。响应式表单也是构建更复杂表单的最佳选择，如果您打算对表单实施单元测试，则效果会更好。

查看以下主题...

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

Angular2 Forms API, Template driven or Reactive?

【参考方案3】：

可以在此处找到类似问题的综合答案： What are the practical differences between template-driven and reactive forms?

这里是 Aravind 发布的内容，内容抽象且直截了当。所以我复制并粘贴了整个比较：

模板驱动的表单功能

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

反应式表单功能

更灵活，但需要大量练习

处理任何复杂的场景

没有完成数据绑定（大多数人首选的不可变数据模型 开发人员）

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

可以进行反应性转换，例如

根据去抖时间处理事件

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

动态添加元素

更简单的单元测试

优缺点对比

【讨论】：

不要发布仅链接到另一个答案的答案，而是将flag the question作为副本发布。

此处完全相同***.com/questions/39142616/…