Angular - 表单

表单 用于从用户收集输入数据，并使用户能够与应用程序交互。一个典型的表单包含各种输入字段，如文本框、单选按钮、复选框和下拉列表，以及一个提交按钮，用于触发将数据发送到服务器或在应用程序内执行其他操作的动作。

在本教程中，我们将学习 Angular 表单是什么、它们如何工作以及它们的使用场景。

Angular 中的表单

Angular 表单 是 Angular 应用程序中接受用户输入的一种方式。它们通过模板视图接收用户的输入事件，验证用户提供的输入，创建表单模型和数据模型以进行更新，并提供跟踪变化的方式。重要的是要注意，Angular 表单使用 HTML form 标签构建。

包含表单的 Angular 应用程序会保持视图与组件模型同步，并保持组件模型与视图同步。当用户通过视图输入或更新值时，新值会反映在数据模型中。同样，如果程序逻辑更新数据模型中的值，这些值也会反映在视图中。

Angular 表单的特点和用途

以下是 Angular 表单的特点和用途 −

• Angular 表单支持双向数据绑定。这是一种允许组件和视图之间双向交互的数据绑定类型。
• 您可以在 Angular 表单中找到各种内置验证器，帮助在提交表单之前检查用户是否输入了有效数据。
• Angular 表单还允许开发者根据用户界面的需要动态添加、移除和修改表单控件。
• 开发者可以使用 FormGroup 将表单控件组织成逻辑组。这有助于管理和跟踪表单不同部分的状态。

Angular 表单类

Angular 表单基于以下四个基础类构建 −

• FormControl: 表示单个表单输入字段。它跟踪单个输入控件的价值、验证状态和用户交互。

• FormGroup: 这个基础类表示一组 FormControl 实例或嵌套的 FormGroup 实例。您可以使用这个类将相关的表单控件分组在一起。它用于管理表单部分的状态（例如，用户详情、地址信息）。

• FormArray: 用于处理表单控件的数组，例如复选框列表或输入字段列表。

• ControlValueAccessor: 它将 Angular FormControl 实例连接到内置的 DOM 元素。

Angular 中的表单类型

Angular 支持两种类型的表单。它们如下 −

• Template-Driven Forms: 如名称所示，模板驱动表单与 Angular 模板密切相关。用户输入验证和行为使用模板中的指令定义。对于数据流，这些表单使用双向数据绑定。您可以在 Angular 应用程序中构建任何简单的表单，例如登录表单和联系表单。请记住，如果您有非常基本的表单需求并希望仅使用模板管理它，那么模板驱动表单可能是一个合适的选择。

• Reactive Forms: 响应式表单遵循模型驱动方法。与模板驱动表单相比，它们更健壮、可扩展，适合复杂表单。这些表单不是通过模板，而是从 Angular Component 类控制。如果表单是您的 Angular 应用程序的关键部分，请使用这种类型的表单。

Reactive Forms 和 Template-Driven Forms 的区别

下表展示了 Reactive Forms 与 Template-Driven Forms 的区别 −

表单验证

表单验证是在提交前检查用户输入是否符合正确格式的过程。该验证过程可用于验证电子邮件地址和电话号码的格式，因为它们具有特定格式。此外，您还可以验证给定的输入是否满足特定约束条件，如最小或最大长度。表单验证可以通过在处理或发送到服务器前捕获无效输入来防止错误。

Angular 中的 Validator class 提供了一组内置的 validator functions 来验证 form controls。一些 validator 示例包括 min、max、required、email、pattern 等。

动态表单？

根据应用状态或用户交互在运行时生成或修改的表单称为 dynamic form。它使表单能够适应数据模型的变化。例如，如果用户选择一个国家，表单可以动态调整以显示额外的字段，如邮政编码、州或国家代码。

您可以通过访问此链接学习如何在 Angular 中创建和使用 dynamic forms：dynamic form。

Angular Forms 多选题

您已到达本章结尾。现在，是时候检查您对 angular forms 的理解了。请尝试对以下问题给出正确答案 −