angular 7表单

本文概述

• 交互表单与模板驱动的表单
• 交互表单和模板驱动表单之间的区别
• 交互表单和模板驱动表单之间的相似性
• 表格模型设置

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

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

• 交互表单
• 模板驱动的表格

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

交互表单与模板驱动的表单

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

交互表单

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

模板驱动的表单

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

交互表单和模板驱动表单之间的区别

交互表单和模板驱动表单之间的相似性

交互式和模板驱动表单共享一些构建基块：

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

表格模型设置

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

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

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

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-交互ive-favorite-color', template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl"> `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}

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

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

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

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

请参阅与上述相同的组件，以及使用模板驱动的表单实现的单个控件的输入字段。

import { Component } from '@angular/core';
@Component({
  selector: 'app-template-favorite-color', template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor"> `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

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

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