前言
在前端开发中，表单是非常常见的组件，而表单验证则是非常重要的一环。在 Angular 单页面应用 (SPA) 中，表单验证同样也是非常重要的。
在本文中，我将介绍 Angular 中如何实现表单验证。本文将会详细且有深度和学习以及指导意义，并且包含示例代码。
策略
我们实现表单验证的常见策略是在 template 中添加校验器，并检查表单控件的状态来确定表单是否有效。让我们看一个实际的例子。
-- -------------------- ---- -------
----- ------------------------
-----
--------------------
------ ------------------------
---- ------------------------------------- -- ----------------------------- -- ---------------------------------
---- ---------------------------------------------------- ----------
---- ------------------------------------------------- -----------
------
------
-------在上面的代码中，我们使用了 Angular 的表单模块来构建表单。其中，我们使用了 FormGroup 和 FormControl 来定义了一个表单组件以及其中的一个表单控件，即 email 控件。我们还使用了 ngIf 指令来显示一个错误消息，当 email 控件无效且已被修改时，该错误消息将被显示。
在本例中，我们使用的校验器有两个。第一个是“required”验证器，用于检查 email 控件是否为空。第二个是“email”验证器，用于检查 email 控件是否为有效的 email 地址。如果 email 控件无效，将会出现相应的错误消息。
核心概念
在表单验证中，我们需要理解以下 Angular 核心概念：
FormControl
FormControl 是 Angular 表单中最基础的一种表单控件，它代表一个特定的表单控件，例如 input、select 等。通过 FormControl 可以有效地控制表单控件的状态以及值的变化。FormControl 是 FormGroup 的一种类型。
FormGroup
FormGroup 是 Angular 表单中的一个重要组件。它代表一组相关的表单控件，并将它们组织成一个整体，如注册表单中的用户名和密码。
FormBuilder
FormBuilder 是 Angular 表单中的一个工具类，我们可以使用它来创建 FormGroup 和 FormControl。
Validator
Validator 是 Angular 中的一个重要接口，用于定义验证器函数。validate 函数接受一个控件作为参数，并返回一个对象，该对象包含一个或多个键。这些键是指该控件未通过验证时应返回的错误消息。
代码示例
下面是一个完整的 Angular 表单验证示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ----------- ----------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
--
------ ----- ------------- -
------ ---------- ----------
------------------- ------------ ------------ -
-------------- - ------------------------
------ --- --------------- --------------------- -------------------
--------- --- --------------- ---------------------
---------------- --- --------------- ---------------------
-- -
---------- ---------------------------
---
-
------ --------------------------------- ---------- -
----- --------------- - ---------------------------------------
----- -------- - --------------------------------
------ -------- --- --------------- - ---- - - ----------------- ---- --
-
-下面是该示例中的模板代码：
-- -------------------- ---- -------
----- ------------------------
-----
--------------------
------ ------------------------
---- ------------------------------------- -- ----------------------------- -- ---------------------------------
---- ---------------------------------------------------- ----------
---- ------------------------------------------------- -----------
------
------
-----
-----------------
------ --------------- ---------------------------
---- ---------------------------------------- -- -------------------------------- -- ------------------------------------
---- --------------------------------------------------------------
------
------
-----
-------------------
------ --------------- ----------------------------------
---- ----------------------------------------------- -- --------------------------------------- -- -------------------------------------------
---- ----------------------------------------------------------
---- -----------------------------------------------------------------------
------
------
-------在这个示例中，我们首先导入了 FormGroup、FormControl、Validators 和 FormBuilder。然后，我们在构造函数中使用 FormBuilder 创建了一个 FormGroup，并添加了三个 FormControl，分别为 email、password 和 confirmPassword。我们还添加了一个密码匹配验证器，该验证器将两个密码字段进行比较，以确保它们的值相同。
在模板中，我们使用了与之前相同的形式来表示表单控件和对应的错误信息。请注意，在对比密码时，我们使用的是 FormGroup 中的 hasError 方法来判断表单是否通过验证器。
结论
本文提供了一个有关在 Angular SPA 应用中如何实现表单验证的指南，介绍了 FormGroup、FormControl、Validator 和 FormBuilder 等一些核心概念。我们还提供了一个完整的 Angular 表单验证示例代码。
在 Angular 应用中使用表单验证，可以确保用户输入的数据的有效性和准确性。尤其在开发复杂的 SPA 应用时，表单验证更是必不可少。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772529e6d66e0f9aad76fad