angular 7表单 - 珊瑚贝

本文概述

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

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

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

交互表单
模板驱动的表格

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

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

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

交互表单

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

模板驱动的表单

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

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

比较指标	交互表单	模板驱动的表单
Setup (form model)	交互表单更为明确。它们在组件类中创建。	模板驱动的表单不太明确。它们是由指令创建的。
Data model	结构化的	非结构化
Predictability	同步	异步
Form validation	功能	指令
Mutability	一成不变的	可变的
Scalability	低级API访问	API之上的抽象

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

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

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 = '';
}

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