使用 Angular Forms 模块构建复杂的企业数据表单 | Angular Forms In Depth (Angular 16)

本课程是 Angular 模板驱动和响应式表单的深入指南，它附带一个正在运行的 Github 存储库。

本课程简而言之

Angular 通常用于构建内部企业应用程序，这些应用程序通常非常密集。这类应用通常有大量复杂的数据录入表单，以及各种复杂的表单验证规则。

Angular 为我们提供了通过 Angular Forms 模块以可扩展且用户友好的方式构建这些复杂表单所需的所有工具。

有两种类型的表单可用：模板驱动表单和反应式表单，我们将在本课程中详细介绍这两种类型的表单。我们还将比较它们并解释何时使用每种表单类型以及原因。

课程大纲

我们将通过使用模板驱动表单和ngModel实现一个简单的表单来开始本课程。我们将准确了解 ngModel 和 ngForm 的工作原理，以及使用这些指令进行数据绑定和表单验证的几种方式。

我们将详细学习模板驱动的表单，包括如何使用自定义指令构建自定义表单验证器。接下来，我们将把我们构建的相同模板驱动表单重构为反应式表单，我们将比较这两种方法。

然后我们将使用反应式表单来构建一个更复杂的数据输入表单，其中包含各种不同类型的控件、嵌套组、控件数组、自定义验证器、异步验证器、多字段验证、表单草稿预保存等等更多的。

我们将构建的多步响应式表单与您在生产应用程序中发现的非常接近，它使我们能够在一个大型的逐步练习中轻松展示响应式表单的所有强大功能。

我们将学习如何构建可重复使用的嵌套表单（如地址表单），我们还将详细介绍文件上传。我们将构建一个带有进度指示器和取消上传功能的自定义文件上传控件。

我们将通过提供一个演示如何使用表单数组的完整示例来结束本课程。

目录

本课程涵盖以下主题：

• Angular Forms模块介绍
• Angular Material 表单组件
• 模板驱动的表单 – ngModel 是如何工作的？
• 典型的表单验证规则
• 表单字段验证错误消息
• 使用 ngModel 进行单向绑定和双向数据绑定
• 详细了解 ngModelOptions
• 模板驱动的表单自定义验证器
• 如何使用 FormBuilder 服务
• 将表单从模板驱动重构为反应式表单
• 模板驱动和响应式表单之间的比较——何时使用以及为什么使用
• 为什么它们被称为反应形式？了解可用的多个 Observable
• 如何以反应形式重置和设置新值
• 使用反应形式开发复杂形式
• 如何使用所有类型的常用表单控件：普通输入、文本区域、单选按钮、复选框、日历、自动完成等。
• formGroup 和 formControlName，以及 formControl 指令
• 反应式表单自定义验证器 – 多字段验证
• 使用异步验证器对表单字段进行后端验证
• 从属字段 – 如何根据其他字段的值启用或禁用某些表单字段
• 预存表单草稿
• 使用 Angular Material 构建多步骤表单
• 可重复使用的嵌套表单（地址表单）
• 自定义文件上传表单控件
• 表格数组

您将在本课程中学到什么？

在课程结束时，您将学习设计和开发复杂数据输入表单所需的一切知识，这些表单既可维护又易于使用。

您将能够实现各种常用的表单验证规则，包括最高级的场景。

您将对使用模板驱动和响应式表单感到自在，并且您将知道何时使用它们以及为什么使用它们。

看看下面的课程免费课程，请享受课程！