简介
ng-custom-validator 是一个 Angular 的自定义验证器模块，它可以帮助开发者快速创建自定义的表单验证。借助于其丰富的 validators 和 rules，开发者可以轻松地创建精确的表单验证器。
安装
要使用 ng-custom-validator，你需要在你的 package.json 中添加依赖：
npm install --save ng-custom-validator
使用
导入模块
在你的 Angular 项目中，需要从 ng-custom-validator 包中导入 CustomValidatorsModule 模块：
import { CustomValidatorsModule } from 'ng-custom-validator';
@NgModule({
imports: [CustomValidatorsModule],
})
export class AppModule {}创建验证器
使用 ng-custom-validator 的基本概念是创建一个自定义验证器并将其添加到表单控件中。
在这里，我们将创建一个基于 ng-custom-validator 的密码验证器，它需要满足以下条件：
- 密码必须至少包含 8 个字符
- 密码必须包含至少一个大写字母和一个小写字母
- 密码必须包含至少一个数字
-- -------------------- ---- ------- ------ - ---------- - ---- ----------------- ------ - ---------------- - ---- ---------------------- ----- ---------------- - ------------------------------------------------- ------ ----- ----------------- - - -------------------- ------------------------------------- ------------------------------ --
在这个例子中，我们结合了 Angular 的原有验证器（Validators.required 和 Validators.pattern）与 ng-custom-validator 的 requiredTrue 验证器。这里，requiredTrue 验证器是用于验证用户必须选中某个人物时的情况，它需要在标记 input 元素上设置 customValidations 属性。
添加到表单控制
在 HTML 中，我们可以将这个验证器应用到任何表单控件，如下所示：
<input type="password" [customValidations]="passwordValidator" />
示例
以下的示例代码展示了如何使用 ng-custom-validator 创建一个基于最小，最大和限制数字范围的自定义验证器。
创建验证器函数
-- -------------------- ---- -------
------ - ---------------- ------------ ---------- - ---- -----------------
------ - ---------------- - ---- ----------------------
------ -------- -------------------------- ------- ---- -------- ----------- -
------ -
-------- ---------------
-- - ----- -------- --- - - ---- -- -
--- ----- - --------------
-- ------ --- ---- -- ----- --- --------- -- ----- --- --- -
------ -----
-
-- -------------- -
------ - ----------- ---- --
-
-- ------ - ---- -
------ - --------- ---- --
-
-- ------ - ---- -
------ - --------- ---- --
-
------ ---------------------------------------
--
-在上述示例代码中，我们先获取控件的值，如果控件没有值，我们将返回 null。如果控件的值不是数字，则返回指示错误的对象。如果它不在指定范围内，则将返回对象表示该控件的值超出指定范围。如果控件值满足验证器的所有条件，则返回 null。
在标记元素上使用验证器
<input type="number" [customValidations]="minMaxNumberValidator(5, 10)" />
在这个例子中，我们在 input 元素上应用了自定义验证器，该验证器需要在标签中设置参数 minMaxNumberValidator(5, 10)。这个验证器将检查输入框的值是否为数字，而且值是否在 5 和 10 之间，如果验证通过，会返回 null。
结论
ng-custom-validator 提供了一个快速、简单和自定义的方式来创建 Angular 表单验证。使用这个 npm 包，开发者可以轻松地为应用程序创建现代和可靠的表单验证，而无需编写大量的表单验证代码。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552af81e8991b448d01d8