前言
在前端开发过程中，我们经常会涉及到表单验证的问题。ng2-validation-message 是一款 Angular2+ 表单验证的 npm 包，用于简化表单验证的工作。本文将为大家介绍如何使用 ng2-validation-message 在 Angular2+ 中进行表单验证。
安装
首先，我们需要使用 npm 命令安装 ng2-validation-message 包。使用以下命令即可：
--- ------- ---------------------- ------
引入
在你的 Angular2+ 项目中，你需要在你的模块中引入 ng2-validation-message 包。使用以下命令：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- -------------------------
-----------
------------- ---------------
-------- --------------- ------------ -------------------------
---------- --------------
--
------ ----- --------- --使用
既然我们已经引入了 ng2-validation-message 包，我们现在就可以开始使用它来进行表单验证。 ng2-validation-message 包中包含了一组 Angular2+ 指令，可以方便地进行表单验证。
1. 使用 validation-message 属性
你可以使用 validation-message 属性来设置表单控件验证失败后的错误信息。 示例代码如下：
------ -----------
----------------------
------------------------------
-------------------------- --
---- ----------------------------- -- ---------------------- -- --------------------------
---- -----------------------------------------------------
------在上面的代码中，我们使用 validation-message 属性来定义了当用户名不合法时的错误信息。然后使用 ngIf 指令和 "required" 来显示错误信息。
2. 使用 validation-messages 属性
你可以为表单中的多个控件一次性定义错误信息。 示例如下：
------ ----------- ---------------------- ----------------------------------- ----------- --
在这个例子中，我们使用 validation-messages 属性为 "username" 控件一次性定义了验证失败的错误信息。需要注意的是，validation-message 优先于 validation-messages，如果 validation-message 和 validation-messages 同时设置了同一个验证器的错误信息，validation-message 会覆盖 validation-messages 设置的信息。
3. 自定义错误信息
虽然 ng2-validation-message 包内置了一些常用的错误信息，但是你可以通过在你的组件中引入 ValidationMessagesService 类，使用 setMessages() 方法来自定义错误信息。
示例如下：
------ - ---------- ------ - ---- ----------------
------ - ------------------------- - ---- -------------------------
------------
--------- ----------
--------- ---------
------------ --------------------
--
------ ----- ------------ ---------- ------ -
------------------- ------------------- -------------------------- --
---------- -
-------------------------------------
--------- --------
---
-
-在上面的例子中，我们通过调用 ValidationMessagesService 的 setMessages() 方法来自定义了 "required" 验证失败时的错误信息。
结语
ng2-validation-message 包提供了一种简单、方便的表单验证方式。使用 npm 安装和引入，再结合不同的属性和指令进行调用，就可以很快地进行表单验证。希望本篇文章对大家能够有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005599d81e8991b448d731f