Angular 中的表单概述
介绍
Angular 中的表单允许用户处理用户输入，如登录、注册、保存、更新和许多其他数据输入任务。
在 Angular 中，我们可以通过两种方式处理用户输入：响应式表单和模板驱动表单。两者都从视图捕获用户输入事件、验证用户输入、创建要更新的表单模型和数据模型，并提供跟踪更改的方法。
响应式表单
响应式表单更具可扩展性、可测试性、可重用性和稳定性。如果您构建的应用程序需要更多响应性，请使用 Angular 的响应式表单来构建应用程序。
让我们考虑一个例子，其中我们使用表单模型 FormControl 实例来设置 Reactive 表单。
文件名：example.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-example',
template: `
Example input: <input type="text" [formControl]="exampleControl">
`
})
export class ExampleComponent {
exampleControl = new FormControl('');
}
模板驱动表单
模板驱动表单的可扩展性不如反应式表单。如果您想要一个非常基本的表单要求和逻辑，并且这些要求和逻辑可以单独在模板中管理，请使用模板驱动表单。
让我们考虑一个模板驱动表单的示例，其中我们将文本值 exampleText 绑定到输入元素。
文件名：example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-template-example',
template: `
Example Text: <input type="text" [(ngModel)]="exampleText">
`
})
export class ExampleComponent {
exampleText = '';
}
通过本指南，您将能够根据您的需求确定选择哪种表单类型。
反应式表单和模板驱动表单之间的主要区别：
反应表单中的数据模型比模板驱动表单更加结构化。
反应表单本质上是同步的，而模板驱动表单是异步的。
反应式表单中的表单验证通过函数处理，而模板驱动表单中的表单验证通过指令处理。
反应形式本质上是不可变的，而模板驱动形式是可变的。
反应式表单更加明确，在组件类中创建，而模板驱动表单则不太明确，由指令创建。
Angular Forms 的构建块
FormControl控件实例跟踪单个表单控件的值和验证状态。
FormGroup控件实例跟踪表单控件集合的相同值和状态。
FormArray控件实例跟踪表单控件数组的相同值和状态。
ControlValueAccessor控件实例在 Angular FormControl 实例和原生 DOM 元素之间创建了一座桥梁。
Angular 中的表单使用表单模型来跟踪 Angular 表单和表单输入元素之间的值变化。
Angular Forms 中的数据流
Angular 中的数据流在反应式和模板驱动形式中处理方式不同。
下面的数据流示例从上面的示例文本输入字段示例开始，然后展示与模板驱动表单相比，如何在反应表单中处理示例文本的更改。
响应式表单中的数据流
从视图（或 DOM）到模型以及从模型到视图的更新或更改是同步的，并且不依赖于 UI 渲染。在响应式表单中，视图中的每个表单元素都直接链接到表单模型（FormControl 实例）。
让我们考虑下面显示的示例，并了解反应表单中数据流的步骤。
文件名：example.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-example',
template: `
Example input: <input type="text" [formControl]="exampleControl">
`
})
export class ExampleComponent {
exampleControl = new FormControl('');
}
以下步骤概述了从视图到模型的数据流。
- 用户在输入元素中输入一个值，在本例中，文本值为“Hello World”。
- 表单输入元素发出具有最新值的“输入”事件。
- 监听表单输入元素上的事件的控制值访问器会立即将新值传递到 FormControl 实例。
- FormControl 实例通过 valueChanges 可观察对象发出新值。
- 任何订阅了 valueChanges 可观察对象的用户都会收到新值。
以下步骤概述了从模型到视图的数据流。
- 用户调用 exampleControl.setValue() 方法，更新 FormControl 的值。
- FormControl 实例通过 valueChanges 可观察对象发出新值。
- 任何订阅了 valueChanges 可观察对象的用户都会收到新值。
- 表单输入元素上的控制值访问器使用新值更新该元素。
模板驱动表单中的数据流
在模板驱动表单中，每个表单元素都链接到内部管理表单模型的指令。
让我们考虑下面显示的示例，并了解模板驱动表单中数据流的步骤。
文件名：example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-template-example',
template: `
Example Text: <input type="text" [(ngModel)]="exampleText">
`
})
export class ExampleComponent {
exampleText = '';
}
以下步骤概述了从视图到模型的数据流。
- 用户在输入元素中输入“Hello World”。
- 输入元素发出一个“输入”事件，其值为“Hello World”。
- 附加到输入的控制值访问器触发 FormControl 实例上的 setValue() 方法。
- FormControl 实例通过 valueChanges 可观察对象发出新值。
- 任何订阅了 valueChanges 可观察对象的用户都会收到新值。
- 控制值访问器还调用 NgModel.viewToModelUpdate() 方法，该方法发出 ngModelChange 事件。
- 由于组件模板对 exampleText 属性使用双向数据绑定，因此组件中的 exampleText 属性将更新为 ngModelChange 事件发出的值。
以下步骤概述了从模型到视图的数据流。
- exampleText 值在组件中更新。
- 变化检测开始。
- 在变化检测期间，NgModel 指令实例上会调用 ngOnChanges 生命周期钩子，因为其某个输入的值已发生改变。
- ngOnChanges() 方法将异步任务排队来设置内部 FormControl 实例的值。
- 变化检测完成。
- 在下一个滴答声中，将执行设置 FormControl 实例值的任务。
- FormControl 实例通过 valueChanges 可观察对象发出最新值。
- 任何订阅了 valueChanges 可观察对象的用户都会收到新值。
- 控制值访问器使用最新的 exampleText 值更新视图中的表单输入元素。
Angular 中的表单验证
出于安全和其他原因，验证是表单的重要组成部分之一。Angular 提供了一组内置验证器以及创建自定义验证器的能力。
- 在反应式表单中，验证是通过自定义验证器作为接收控制权来验证的函数来处理的。
- 在模板驱动表单中，验证通过指令处理，并且必须提供包装验证函数的自定义验证器指令。
结论
在本指南中，我们探索了角度中的表单，并看到了不同类型的表单，如反应式表单和模板驱动表单。
您可以在我的指南《Angular 数据绑定概述》中了解有关 Angular 的更多信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~