在 Angular 中， ng2-validation-manager 是一个非常受欢迎的 npm 包，它为开发人员提供了一种方便的方法来验证表单输入。本文将详细介绍如何使用 ng2-validation-manager 并提供示例代码和深度学习指导。
安装 ng2-validation-manager
首先，你需要安装 ng2-validation-manager。你可以在命令行中使用以下命令来执行安装：
npm install ng2-validation-manager --save
引入 ng2-validation-manager 到你的项目
要在你的项目中使用 ng2-validation-manager，你需要在模块头部导入它：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- ------ - ----------------------- - ---- ------------------------- -- -- ---------------------- ----------- ------------- --------------- -------- --------------- ------------ ----------------------------------- -- -- ---------------------- ---------- -------------- -- ------ ----- --------- --
以上例子是用 @NgModule() 装饰器导入了 ng2-validation-manager 的 ValidationManagerModule。一旦你导入了它，你就可以在你的项目中使用它了。
在组件中使用 ng2-validation-manager
现在，我们已经将 ng2-validation-manager 引入到我们的项目中。我们来看看如何在组件中使用它。需要注意的是，在使用前你必须先导入 ValidatorManager 类：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------- -- -- ----------------
------------
--------- -----------
--------- -
----- ------------------------
------ ----------------------------- ------------------------
------------------------------------
------ ---------------------------- -----------------------
-----------------------------------
------- -----------------------------
-------
-
--
------ ----- ------------ -
----- - ----------- --- --------- ----
-- - --- -------------------
---------- -----------------
--------- ----------
---
---------- -
----------------- ------------ ------------
-
-
在这个应用程序中，我们在 AppComponent 组件中引入了 ValidatorManager。我们创建了一个名为 vm 的验证管理器实例，该实例要求 firstName 和 lastName 字段必须具有它们的类型（alpha/required）。
注意在上面的 html 表单中，有两个输入框分别是 firstName 和 lastName 字段。在模板内，每个输入框上都使用了双向绑定，并将其与验证管理器的两个字段进行了关联。我们还在这个模板中使用了错误提示。
自定义错误信息
ng2-validation-manager 非常灵活，可以方便地自定义错误信息。在你的代码中，你可以更改字段验证规则以及相应的错误信息。相信我，这将大大简化你的开发过程！
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------------ - ---- -------------------------
-------------
------ ----- ------------------------ ------- ------------------ -
---------------- - -------- -------- -------- - - -
-------- -- -- ----------
----------- -- -- ---------
-------- -- -- ----------------- -----------------
------------ -------- ---- -- ------ ------------------------ -----
------------ -------- ---- -- ------ ------------------------ ------
--
------------- -
--------
-
-如上所示，我们创建了一个 CustomValidationMessages 类，继承了 ValidationMessages 类。我们定义了一些标准的错误信息和规则，例如 alpha、required、email、minLength 和 maxLength。
这是如何在组件代码中使用此类:
vm = new ValidationManager({
firstName: 'required|alpha',
lastName: 'required'
});
constructor(private cv: CustomValidationMessages) {
this.vm.setValidationMessages(cv); // 设置自定义错误信息
}在上面的代码中，我们将 CustomValidationMessages 类实例化，并将其表单验证管理器转换为自定义验证器。我们将它们传递给 ValidationManager 实例的 setValidationMessages() 方法，并且在组件中使用这个新的验证器。
这也是一个优美的设计，因为让开发人员在整个应用程序中使用同一个错误信息。
总结
这篇文章介绍了 ng2-validation-manager，以及如何将其引入到我们的项目中。我们深入学习了如何在组件中使用它和自定义错误信息。现在，你可以在你的项目中使用 ng2-validation-manager 进行 AngularJS 表单验证的开发了。
不用担心如果您还不完全了解此模块的用法，只有在不断练习和使用后才能真正掌握这个工具。我的建议是，尝试在不同的项目中使用它，提高您的技能水平，并将它紧密结合您的应用程序所需的其它模块中。这将使你的开发流程更加高效，节省宝贵的时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609d81e8991b448ded93