Angular表单 （一）表单简介

Angular 表单

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

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

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

 

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

	响应式	模板驱动
创建（表单模式）	显示，在组件类中建立	隐私，由组件建立
数据模式	结构化	非结构化
可预测性	同步	异步
表单验证	函数	指令
可变性	不可变	可变
可伸缩性	访问底层api	在api之上抽象

  

 

 

 

 

 

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

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

• 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提供了一组内置的验证器，并提供了建立自定义验证器的功能。

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

测试

可变性

可伸缩性