前言
在前端开发中，我们经常需要对用户输入的内容进行校验。而 Angular 框架内置的校验器虽然功能强大，但是在一些复杂的场景下，可能就无法满足我们的需求。为了解决这个问题，@mediacologne 团队开发了一个叫做 @mediacologne/angular-annotato-module 的 npm 包，它提供了一种轻量级的、可适应各种场景的校验方法。本文将介绍如何在 Angular 中使用该包，并详细讲解其实现原理。
安装
要使用 @mediacologne/angular-annotato-module，首先需要在项目中安装 npm 包。打开命令行终端，切换到项目目录下，输入以下命令即可安装该包：
npm install @mediacologne/angular-annotato-module
使用说明
1. 导入模块
在需要使用该包的模块中，导入 AnnotatoModule 模块，并将其添加到 @NgModule 的 imports 数组中。示例代码如下：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------------------------
-----------
-------- -
--------------
--
-- ---
--
------ ----- -------- - -2. 在模板中使用指令
在需要进行校验的表单组件中，使用 @Annotato 指令对表单元素进行标记。可以通过该指令绑定多个校验器，每个校验器都有一个唯一的名称。
<form> <input type="text" name="username" [(ngModel)]="username" required minlength="4" [validateWith]="'username'"> <input type="email" name="email" [(ngModel)]="email" required email [validateWith]="'email'"> <button type="submit" [disabled]="!form.valid">Submit</button> </form>
在上述例子代码中，我们标记了两个输入框，并使用了两个校验器：'username' 和 'email'。要使表单元素生效，我们还需要提供一个名为 form 的 FormGroup 对象，以及将其传递给每个 Annotato 指令。
3. 实现校验器
要实现一个自定义校验器，可以使用 @InjectAnnotatoValidation 注解。该注解接收一个字符串参数，表示校验器的唯一名称。我们还需要实现一个名为 validate 的方法，它接收一个 FormControl 对象，并返回一个对象，其中包含了校验结果和错误信息。示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------------------ - ---- ----------------------------------------
------------- ----------- ------ --
-------------------------------------
------ ----- ----------------- -
----------------- ------------ -
-- ---------------- -
------ - ------ ------ -------- --------- --
-
-- --------------------- - -- -
------ - ------ ------ -------- -------- - ---- --
-
------ - ------ ---- --
-
-在上述例子代码中，我们实现了一个名为 UsernameValidator 的校验器。它的名称为 'username'，我们在模板中使用该名称来绑定 Annotato 指令。该校验器的 validate 方法中，首先判断是否存在值，如果不存在则返回失败结果；如果该输入框长度小于 5，则返回失败结果和错误信息。否则返回成功结果。
4. 注册校验器
在我们的校验器准备就绪后，我们需要将其注册到 @Annotato 标记中。我们可以使用 provideValidators 方法，将校验器名称和对应的实例传递给 Annotato 服务。示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------
------ - --------- ----------------- - ---- ----------------------------------------
------ - ----------------- - ---- -----------------------
------ - -------------- - ---- --------------------
------------
--------- -
------
------ ----------- --------------- ---------------------- -------- ------------- ----------------------------
------ ------------ ------------ ------------------- -------- ----- -------------------------
------- ------------- ----------------------------------------
-------
-
--
------ ----- ----------- -
-------- - ---
----- - ---
------------------- --------- --------- ------- ------------------ ------------------ ------- --------------- --------------- -
--------------------------
--------- --------------------------------------- ------------------------ ----------------------------------
------ --------------------------------------- ----------------- ------------------------------
---
-
--- ------ -
------ -------------------
-
-在上述例子代码中，我们将两个自定义校验器的实例传递给 provideValidators 方法，并将其名称和提供的校验器方法绑定起来。然后在 Annotato 服务初始化完成后，我们可以通过提供的 Annotato.form 属性，获取到整个表单的表单对象，从而据此实现表单校验。
结语
@mediacologne/angular-annotato-module 是一个非常优秀的 Angular 表单校验组件，它为我们在复杂场景下校验表单提供了一种轻量级的解决方案。在本文中我们介绍了该组件的使用方法和实现原理，希望对读者有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e26c3