【angular开发总结】- Angular响应式表单和表单控件封装

最新推荐文章于 2024-05-12 09:41:48 发布

Web_boom

最新推荐文章于 2024-05-12 09:41:48 发布

阅读量860

点赞数

文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/Android_boom/article/details/125899982

版权

angular的表单分响应式表单和模板驱动表单。

响应式表单比模板驱动表单更有可伸缩性。它们提供对底层表单 API 的直接访问，并且在视图和数据模型之间使用同步数据流，从而可以更轻松地创建大型表单。

模板驱动表单专注于简单的场景，可复用性没那么高。在视图和数据模型之间使用异步数据流。

1、理解angular响应式表单

常用表单基础类

FormControl 实例用于追踪单个表单控件的值和验证状态。
FormGroup 用于追踪一个表单控件组的值和状态。
FormArray 用于追踪表单控件数组的值和状态。
ControlValueAccessor 用于在 Angular 的 FormControl 实例和内置 DOM 元素之间创建一个桥梁。

建立响应式表单

对于响应式表单，你可以直接在组件类中定义表单模型。[formControl] 指令会通过内部值访问器ControlValueAccessor来把显式创建的 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('');
}

图 1.在响应式表单中直接访问表单模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jExfEugf-1658319900786)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4af91c701a9445d09ae1ff1a1b1e8066~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

响应式表单中的数据流

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

视图=>模型 的数据流步骤：

最终用户在输入框元素中键入了一个值，这里是 “Blue”。
这个输入框元素会发出一个带有最新值的 “input” 事件。
这个控件值访问器 ControlValueAccessor 会监听表单输入框元素上的事件，并立即把新值传给 FormControl 实例。
FormControl 实例会通过 valueChanges 这个可观察对象发出这个新值。
valueChanges 的任何一个订阅者都会收到这个新值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0BiMRrc-1658319900787)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04593707a76544d298844c569a5af0c1~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

模型=>视图 的数据流步骤：

favoriteColorControl.setValue() 方法被调用，它会更新这个 FormControl 的值。
FormControl 实例会通过 valueChanges 这个可观察对象发出新值。
valueChanges 的任何订阅者都会收到这个新值。
该表单输入框元素上的控件值访问器ControlValueAccessor会把控件更新为这个新值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7XwO49i-1658319900787)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ad976a94cb8432cacf18f49e9297276~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]