Angular-Validation 是一个用于 Angular 应用程序的轻量级表单验证库，它提供了易于使用的 API 和丰富的验证功能。在本文中，我们将学习如何使用 Angular-Validation 进行表单验证。
安装
要使用 Angular-Validation，需要先安装它。可以通过以下命令使用 npm 进行安装：
--- ------- ------------------ ------
此命令将 Angular-Validation 安装为项目的依赖项，并将其添加到 package.json 文件中。
导入模块
在使用 Angular-Validation 时，必须将其导入到应用程序模块中。可以使用以下命令导入模块：
------ - ---------------- - ---- ---------------------
然后，在 @NgModule 的 imports 中添加 ValidationModule：
-----------
-------- -
--------------
------------
-----------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -在模板中使用指令
要在模板中使用 Angular-Validation，需要将其指令添加到需要进行验证的表单元素上。以下是一些示例：
----- ------------------------- -----------------
---- -------------------
------ -------------------------
------ ------------ ------------ ---------- ------- ------------- -------- --
---- --------------------------------------
---- --------------------------------------------------- -- --------------
---- ---------------------------------------------------------- ----- ------------
------
------
---- -------------------
------ -------------------------------
------ --------------- --------------- ------------- ------- ------------------ --
---- -----------------------------------------
---- --------------------------------------------------------------- ---- -- -- ----- - ---------- ----------
------
------
------- -----------------------------
-------在上面的示例中，我们向两个表单元素添加了指令。第一个元素是 email 输入框，它使用了 validateEmail 和 required 指令进行验证。如果输入框为空或者格式不正确，会显示相应的错误信息。第二个元素是 password 输入框，它使用了 validateLength 指令进行验证。如果密码长度小于 8 个字符，会显示相应的错误信息。
创建自定义验证器
如果需要创建自定义验证器，可以使用 ValidationErrors 接口来定义验证器的返回值类型。以下是一个示例：
------ - ---------- ---------- - ---- ----------------
------ - -------------- ---------- ---------------- ---------------- - ---- -----------------
------------
--------- -------------------------
---------- -
-
-------- --------------
------------ ------------- -- -----------------------
------ ----
-
-
--
------ ----- --------------------- ---------- --------- -
----------------- ----------------- ---------------- - ---- -
-- ---------------- -
------ ----- -- ---------- ----
-
----- ----- - --- ---------------------- -----
-- --------------------------- -
------ ----- -- -------------- ----
-
------ - ------------ ---- -- -- ------------
-
-在上面的示例中，我们创建了一个名为 UrlValidatorDirective 的指令，并将其添加到选择器 [validateUrl][ngModel] 中。该指令使用了 NG_VALIDATORS 提供的 provide 和 useExisting 属性来注册自己作为验证器。
然后，我们实现了 Validator 接口中的 validate 方法。该方法接收一个 AbstractControl 对象，并使用正则表达式来检查控件的值是否符合规则。如果符合，则返回 null，否则返回一个包含
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35892