表单是 Web 应用中最常见的交互方式之一。要保证表单数据的正确性和完整性，表单验证是不可避免的。Angular 提供了丰富的表单验证功能，包括内置的验证规则以及自定义的验证器。本文将详细介绍 Angular 中的表单验证和自定义表单验证。
内置的表单验证规则
Angular 内置了许多常见的表单验证规则，包括必填、最小值、最大值、最小长度、最大长度、正则表达式等。将这些验证规则应用于表单控件可以有效地保证表单数据的正确性。下面是使用内置验证规则的示例代码：
-- -------------------- ---- -------
------
-------
----
------ ----------- --------------- ---------------------- -------- ------------- ---------------
--------
-------
---
------ --------------- --------------- ---------------------- ---------
--------
------- -------------------------
-------在上述示例代码中，用户名控件应用了 required、minlength 和 maxlength 三个内置验证规则；密码控件应用了 required 规则。这些验证规则可以在模板中直接应用于表单控件，非常方便。
自定义表单验证器
除了内置的验证规则，Angular 还提供了自定义表单验证器的功能。开发者可以根据业务需求自定义验证器，比如验证两个密码是否一致、验证手机号码格式等。自定义表单验证器可以是同步的，也可以是异步的。
在实现自定义表单验证器前，先来了解一下 Angular 中的 FormControl 类。FormControl 类代表了一个表单控件，可以用来对表单控件进行状态管理和验证。下面是使用自定义表单验证器的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
-------- ------------------------------- ----------- - ----- -------- ------- - - ---- -
----- -------- - ------------------------
----- --------------- - -------------------------------
-- --------- -- ---------------- -
------ -------------- --- --------------------- - ---- - - ---------------- ---- --
-
------ -----
-
------------
--------- --------------------
------------ ---------------------------------
--
------ ----- --------------------- -
---- - --- -----------
--------- --- --------------- ---------------------
--------- --- --------------- ---------------------
---------------- --- --------------- ---------------------
-- - ----------- ---------------------- ---
-在上述示例代码中，我们实现了一个自定义的表单验证器，用于验证两个密码是否一致。passwordMatchValidator 函数接收一个 FormGroup 类型的参数，代表了包含了一组表单控件的表单；函数返回一个对象，如果验证没有通过，则返回一个包含 passwordMatch 属性的对象，否则返回 null。在组件类里面，我们使用 FormGroup 类构建了一个表单控件组，并把自定义的表单验证器应用于这个表单控件组。
在模板里面使用自定义表单验证器也非常简单：
-- -------------------- ---- -------
----- -------------------
-------
----
------ ----------- ---------------------------
--------
-------
---
------ --------------- ---------------------------
--------
-------
-----
------ --------------- ----------------------------------
--------
---- ---------------------------------------
-----
------
------- -------------------------
-------在上述示例代码中，我们在表单组件上使用了 formGroup 指令，将表单控件组绑定到组件的 form 属性上。对于需要使用自定义验证器的表单控件，使用 formControlName 指令指定控件的名称即可。当表单验证不通过时，显示一个错误提示信息。
总结
在本文中，我们介绍了 Angular 中的表单验证和自定义表单验证器。内置的验证规则可以方便地实现常见的表单验证需求，而自定义表单验证器则可以满足更加复杂的业务需求。使用表单验证可以保证表单数据的正确性和完整性，提高应用的稳定性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653759707d4982a6ebfd520a