Angular 是现代 Web 前端开发中著名的框架之一，表单验证是 Angular 中重要的特性之一。表单验证是 Web 应用中最常用的部分之一，通过表单验证确保提交的数据是有效的和正确的。在 Angular 中，表单验证实现是简单的，并且提供了内置的指令和管道以验证表单。
在本文中，我们将更深入地了解 Angular 中的表单验证，包括如何使用内置指令设置必填字段、正则表达式、从后端验证表单等。
Angular 表单验证架构
Angular 中的表单验证有两种形式：模板驱动表单和模型驱动表单。
模板驱动表单是通过 Angular 模板管理的表单，包含了 HTML 和指令。在模板驱动表单中，表单验证规则是通过指令来设置的。
而模型驱动表单是使用了 Angular 的 Reactive Forms 模块，这种方式更加灵活并支持更广泛的场景。在 Reactive Forms 中，表单验证规则是由 FormControl 和 FormGroup 控制的，FormGroup 是一个包含一些 FormControl 和 FormGroup 的集合。
无论是哪种形式的表单验证，都可以使用 Angular 内置的 FormGroup 和 FormControl 类或一些自定义类实现验证。
模板驱动表单
模板驱动表单是通过 Angular 模板管理的表单，包含了 HTML 和指令。在模板驱动表单中，表单验证规则是通过指令来设置的。
例如，我们可以添加一个 required 属性到表单控件上，使其成为必填项：
<input type="text" name="username" required>
关于模板驱动表单的表单验证更多内容可以参考官方文档。
模型驱动表单
模型驱动表单是通过 Reactive Forms 模块实现的，这种方式更加灵活并支持更广泛的场景。
在 Reactive Forms 中，我们可以使用内置的 Validators 类及其静态方法，设置表单验证规则。例如：
-- -------------------- ---- -------
-- -- ---------- -
------ - ---------- - ---- -----------------
-- ---- ---- -----
---------------- - ---------------
--------- ---- --------------------- ---------------------------
------ ---- --------------------- -------------------
--------- ---- --------------------- --------------------------
--------------------- ---- ----------------------
-- -
---------- ---------------
---
-- -------------
-------- ----------------- ---------- -
----- -------- - -------------------
----- --------------- - -------------------------------
-- ----------------------- -- ----------------------------------------- -
-- -------------
-------
-
-- --------------- --- ---------------------- -
-- -- ---------------- --
--------------------------- ----------------- ---- ---
- ---- -
-- -- ---------------- --
--------------------------------
-
-在上面的例子中，我们创建了一个 FormGroup，包含了若干个 FormControl。我们使用 Validators 静态方法来设置每个 FormControl 的验证规则，然后通过 FormGroup（和自定义验证器）来检验密码和确认密码是否一致。
Angular 中内置的表单验证指令
在 Angular 中，内置了一些指令，用于设置表单验证规则。以下是一些常用的指令：
| 指令 | 描述 |
|---|---|
ngModel |
双向绑定控件的值，验证规则可以通过 Validators 设置 |
email |
控件的值必须为电子邮件地址 |
url |
控件的值必须为 URL |
required |
控件的值必须非空 |
max |
控件的值必须小于或等于指定最大值 |
min |
控件的值必须大于或等于指定最小值 |
pattern |
控件的值必须符合正则表达式 |
maxLength |
控件的值的长度不能超过指定的最大长度 |
minLength |
控件的值的长度不能小于指定的最小长度 |
Angular 中自定义表单验证指令
有时候内置的验证指令不足以满足需求，我们需要自定义验证指令。在 Angular 中，我们可以使用 @Directive 装饰器来创建自定义指令，并在指令类中使用 Validators 类来设置验证规则。
以下是一个自定义的验证指令，它用来验证输入的值是否为英文字母：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ---------- ----------- - ---- -----------------
------------
--------- ----------------
---------- -- -------- -------------- ------------ ------------------------------ ------ ---- --
--
------ ----- ----------------------------- ---------- --------- -
----------------- ------------- - ----- -------- --- - - ---- -
----- ------- - --------------
----- ----- - --------------
-- ---------------------- -
------ - ------------ ---- --
- ---- -
------ -----
-
-
-在上述例子中，我们使用了 @Directive 装饰器来创建自定义的验证指令，并在指令类中实现了 Validator 接口。通过实现 Validator 接口，我们必须要实现 validate 方法，它接收一个 FormControl 类型的参数，表示需要验证的表单控件。
在 validate 方法中，我们使用正则表达式来验证表单控件的值是否为英文字母，并根据验证结果返回一个标识符对象 { lettersOnly: true } 或 null。
如何从后端验证表单
在一些应用场景下，我们需要将表单数据传送到后端进行验证。使用 Angular 中的 HttpClient 可以很容易地完成这个操作。以下是一个简单的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- ------------
--------- -
----- ----------------------- ------------------------
-------
------
------ ----------- ------------------------
--------
-------
---------
------ --------------- ---------------------------
--------
------- ------------- --------------------------------------------
-------
-
--
------ ----- -------------- -
---------- ----------
------------------- ----- ----------- - -
----------- ---- -
-------------- - --- -----------
-------- --- --------------- ---------------------
----------- --- --------------- ---------------------
---
-
----------- ---- -
----- ----- - ---------------------------
----- -------- - ------------------------------
------------------------ - ------ -------- --------------------- -- -
-- ----
-- ----- -- -
-- ----
---
-
-在上面的代码中，我们首先创建了一个表单，包含了 Email 和 Password 两个字段。然后，我们使用 HttpClient.post 方法，将表单数据和路径传送到服务器，根据服务端返回的响应结果，处理表单验证结果。
总结
在 Angular 中，表单验证是非常常见和重要的部分。在本文中，我们介绍了 Angular 中的表单验证架构，即模板驱动表单和模型驱动表单，并分别介绍了它们的验证方式。此外，我们还介绍了 Angular 中内置的验证指令、自定义验证指令和从后端验证表单的方法。希望读者理解了这些知识后，能够在实际开发中更加灵活地使用表单验证功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ed3cb48841e9894b56a58