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

Question

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

Answer 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": "test@123.com",
"phoneNumber": "123"
}

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

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

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

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

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

<p>Hello {{username}}!</p>

Answer 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?

Answer 3

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

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

模板驱动的表单功能

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

反应式表单功能

• 更灵活，但需要大量练习

• 处理任何复杂的场景

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

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

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

  • 根据去抖时间处理事件

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

  • 动态添加元素

• 更简单的单元测试

优缺点对比