什么是 ngx-validator-extend
ngx-validator-extend 是一个 Angular 表单验证工具，基于 Angular 自带的 FormGroup 和 FormControl，可以方便地给表单控件添加验证规则。同时，ngx-validator-extend 还支持自定义验证器，使得开发者可以根据自身需求随意定制表单验证规则。
ngx-validator-extend 如何使用
使用 ngx-validator-extend 需要以下步骤：
- 安装 ngx-validator-extend
npm install ngx-validator-extend --save
- 导入 ValidatorExtendModule
在需要使用表单验证的模块中，导入 ValidatorExtendModule：
-- -------------------- ---- -------
-- -------------
------ - --------------------- - ---- -----------------------
-----------
-------- -
---------------------
-
--
------ ----- --------- --- 创建 FormGroup
在组件中创建 FormGroup，表单控件可以使用 Angular 自带的 FormControl：
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
--------- ----------
---------- -
------------- - --- -----------
--------- --- --------------
--------- --- -------------
---
-
-- 添加验证规则
使用 ValidatorExtend 提供的 Validators，可以方便地添加验证规则：
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
--------- ----------
---------- -
------------- - --- -----------
--------- --- --------------- --------------------------------
--------- --- --------------- ----------------------- --------------
---
-
-可以看到，Validators 的使用方式和 Angular 自带的 Validators 相同，可以传入验证规则和错误信息两个参数。
- 显示错误信息
在模板中，可以使用 Angular 自带的文本框控件和错误信息的指令，来方便地显示验证错误信息：
-- -------------------- ---- -------
---- ------------------ ---
----- -----------------------
-----
-------------------
------ ----------- ---------------------------
---- -------------------------------------------- -- ------------------------------------ -- ----------------------------------------
---------------------------------------------
------
------
-----
------------------
------ --------------- ---------------------------
---- -------------------------------------------- -- ------------------------------------ -- ----------------------------------------
---------------------------------------------
------
------
------- ------------- -----------------------------------------
-------使用 ngIf 指令和 FormControl 的 errors 属性，判断表单控件是否验证失败，并显示错误信息。
自定义验证器
如果 Validators 提供的验证规则不满足需求，可以自定义验证器。自定义验证器有两种方式：
1. 函数验证器
可以直接传入验证函数来定义验证规则。验证函数需要返回一个对象，key 为错误代码，value 为错误信息：
export function eqValidator(control: AbstractControl) {
if(control.value && typeof control.value === 'string') {
const value = control.value.trim();
return value.length == 2 ? null : {'invalid': '必须是两个字符'};
}
}2. 类验证器
可以定义一个类来实现验证规则，类中需要实现 Validator 接口，其中的 validate 方法就是验证规则：
export class RangeValidator implements Validator {
validate(control: AbstractControl): {[key: string]: any} | null {
if(control.value && typeof control.value === 'number') {
const value = control.value;
return value >= 0 && value <= 100 ? null : {'invalid': '必须在 0 到 100 之间'};
}
}
}在组件中使用自定义验证器：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ----------- ---------- --------------- - ---- -----------------------
-------- -------------------- ---------------- -
---------------- -- ------ ------------- --- --------- -
----- ----- - ---------------------
------ ------------ -- - - ---- - ----------- -----------
-
-
------ ----- -------------- ---------- --------- -
----------------- ----------------- ------ -------- ---- - ---- -
---------------- -- ------ ------------- --- --------- -
----- ----- - --------------
------ ----- -- - -- ----- -- --- - ---- - ----------- ---- - - --- -----
-
-
-
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
--------- ----------
---------- -
------------- - --- -----------
--------- --- --------------- --------------------------------
--------- --- --------------- ----------------------- ---------------
---- --- --------------- - ------------------------------ --- ---------------- ---
----- --- --------------- - ------------------------------ ----------- --
---
-
-总结
ngx-validator-extend 是 Angular 中非常好用的表单验证工具，支持丰富的验证规则，并可以方便地自定义验证器。使用 ngx-validator-extend 可以快速地实现表单验证，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730981e8991b448e934a