发表于: 2021-03-21 23:46:35

1 1025


今天完成的事情:

学习表单

Angular 表单简介:

用表单处理用户输入是许多常见应用的基础功能。 应用通过表单来让用户登录、修改个人档案、输入敏感信息以及执行各种数据输入任务

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


响应式表单和模板驱动表单的区别

响应式表单:

建立表单模型:显式的,在组件类中创建。数据模型:结构化和不可变的。可预测性:同步。表单验证:函数。

模板驱动表单:

建立表单模型:隐式的,由指令创建。数据模型:非结构化和可变的。可预测性:异步。表单验证:指令


可伸缩性

响应式表单比模板驱动表单更有可伸缩性

模板驱动表单专注于简单的场景,可复用性没那么高


常用表单基础类

响应式表单和模板驱动表单都建立在下列基础类之上。

FormControl 实例用于追踪单个表单控件的值和验证状态。

FormGroup 用于追踪一个表单控件组的值和状态。

FormArray 用于追踪表单控件数组的值和状态。

ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁


建立响应式表单

[formControl] 指令会通过内部值访问器来把显式创建的 FormControl 实例与视图中的特定表单元素联系起来,例:

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('');
}


建立模板驱动表单

指令 NgModel 为指定的表单元素创建并管理一个 FormControl 实例

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

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


表单中的数据流

当应用包含一个表单时,Angular 必须让该视图与组件模型保持同步,并让组件模型与视图保持同步。当用户通过视图更改值并进行选择时,新值必须反映在数据模型中。

响应式表单中的数据流:

在响应式表单中,视图中的每个表单元素都直接链接到一个表单模型。 从视图到模型的修改以及从模型到视图的修改都是同步的,而且不依赖于 UI 的渲染方式

模板驱动表单中的数据流:

在模板驱动表单中,每一个表单元素都是和一个负责管理内部表单模型的指令关联起来的


表单验证

响应式表单把自定义验证器定义成函数,它以要验证的控件作为参数。

模板驱动表单和模板指令紧密相关,并且必须提供包装了验证函数的自定义验证器指令


问题:

未完全看完“表单”,最近状态差,


返回列表 返回列表
评论

    分享到