角度7形式

角形用于处理用户的输入。我们可以在应用程序中使用Angular表单，使用户能够登录，更新配置文件，输入信息以及执行许多其他数据输入任务。

在Angular 7中，有两种方法可以通过表单来处理用户的输入：

• 反应形式
• 模板驱动的表格

两种方法都用于从视图中收集用户输入事件，验证用户输入，创建要更新的表单模型和数据模型以及提供跟踪更改的方法。

反应性表单与模板驱动的表单

响应式表单和模板驱动的表单都以不同的方式管理和处理数据。每个都有不同的优势。

反应形式

• 反应形式更可靠。
• 反应性表单更具可伸缩性，可重用性和可测试性。
• 如果表单是应用程序的关键部分，或者您的应用程序已经使用响应模式构建，则最适合使用它们。在这两种情况下，最好使用反应形式。

模板驱动的表格

• 如果要向应用程序中添加简单表单，则模板驱动表单是最好的。例如：电子邮件列表注册表单。
• 模板驱动的表单易于在应用程序中使用，但不像Reactive表单那样可伸缩。
• 如果您的应用程序需要非常基本的形式和逻辑，则主要使用模板驱动的形式。可以轻松地在模板中对其进行管理。

反应形式和模板驱动形式之间的区别

反应形式和模板驱动形式之间的相似性

响应式和模板驱动形式共享一些构建基块：

• FormControl：用于跟踪单个表单控件的值和验证状态。
• FormGroup：用于跟踪表单控件集合的相同值和状态。
• FormArray：用于跟踪表单控件数组的相同值和状态。
• ControlValueAccessor：用于在Angular FormControl实例和本机DOM元素之间创建桥梁。

表格模型设置

表单模型设置用于跟踪Angular表单和表单输入元素之间的值更改。让我们来看一个示例，看看如何定义和创建表单模型。

响应式表单中的表单模型设置

有关使用反应式形式实现的单个控件，请参见以下带有输入字段的组件。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color:  `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}

在反应形式中，形式模型是真理的源头。真理的来源提供了表单元素在给定时间点的价值和地位。

在上面的示例中，表单模型是FormControl实例。

在反应形式中，表单模型在组件类中明确定义。之后，反应式表单指令(此处为：FormControlDirective)使用值访问器(ControlValueAccessor实例)将现有FormControl实例链接到视图中的特定表单元素。

模板驱动的表单中的表单模型设置

参见上面与上述组件相同的组件，该组件的输入字段用于使用模板驱动的表单实现的单个控件。

import { Component } from '@angular/core';
@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color:  `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

在模板驱动的形式中，真理的来源是模板本身。

表单模型抽象可简化结构。模板驱动的表单指令NgModel为给定的表单元素创建和管理FormControl实例。它不太明确，但是删除了对表单模型的直接控制。