angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。二者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径。
响应式表单和模板驱动表单在处理和管理表单和表单数据方面有所不同,各有优势。
响应式 | 模板驱动 | |
建立(表单模式) | 显示,在组件类中创建 | 隐私,由组件创建 |
数据模式 | 结构化 | 非结构化 |
可预测性 | 同步 | 异步 |
表单验证 | 函数 | 指令 |
可变性 | 不可变 | 可变 |
可伸缩性 | 访问底层api | 在api之上抽象 |
二者共享了一些底层构造块:
响应式表单和模板驱动表单都是用表单模型来跟踪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提供了一组内置的验证器,并提供了创建自定义验证器的功能。
原文:https://www.cnblogs.com/dominic-cheng/p/12297002.html