Angular 表单

　　angular提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。二者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径。

　　响应式表单和模板驱动表单在处理和管理表单和表单数据方面有所不同，各有优势。

• 　　响应式表单更健壮：可扩展性、可复用性和可测试性更强。（如果表单时应用中的关键部分，或者要使用响应式编程模式来构建应用，可以使用响应式表单。）
• 　　模板驱动表单在往应用中添加简单的表单时非常有用（比如：邮件列表的登记表单），它们很容易添加到应用中，但是不想响应式表单一样容易扩展。（如果表单需求比较简单，或者逻辑比较清晰，可以使用模板驱动表单）

响应式表单和模板驱动表单的关键差异 

响应式表单和模板驱动表单的共同基础

二者共享了一些底层构造块：

• 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: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl(‘‘);
}

权威数据源负责提供在指定时间点上表单元素的值和状态。在响应式表单中，表单模式充当权威数据源。上面代码中的表单模型就是FormControl的实例。

reactive forms：响应式表单

form control instance：窗体控件实例

direct access to FormControl instance after link is created by FormControlDirective:在由FormControlDirective创建链接后直接访问FormControl实例

在响应式表单中，表单模型是显式定义在组件类中的。然后，响应式表单指令（这里是FormControlDirective）会把这个现有的表单实例通过数据访问器（ControlValueAccessories的实例）来指派给视图中的表单元素。

在模板驱动表单中建立：

下面是一个带有输入字段的组件，使用模板驱动表单实现了单个控件。

import { Component } from ‘@angular/core‘;

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

 在模板驱动表单中，权威数据源是模板。

 Can only access FormControl instance via NgModal directive:只能通过NgModal指令访问FormControl实例

表单模型中的抽象促进了结构的简化。模板驱动表单的NgModal指令负责创建和管理指定表单元素上的表单控件实例，它不那么明显，但是不必直接操纵表单模型。

 表单中的数据流

在处理表单输入时，两种表单遵循两种不同的策略。

响应式表单中的数据流：待续

模板驱动表单中的数据流：待续

表单验证

验证是任何表单必备的部分，Angular提供了一组内置的验证器，并提供了创建自定义验证器的功能。

• 响应式表单把自定义验证器定义成函数，以要验证的控件作为参数。
• 模板驱动表单和模板指令紧密相关，并且必须提供包装了验证函数的自定义验证器指令（什么意思？没明白）

测试

可变性

可伸缩性

Angular表单 （一）表单简介

原文：https://www.cnblogs.com/dominic-cheng/p/12297002.html