前言
在前端开发过程中，我们经常会涉及到表单验证的问题。ng2-validation-message 是一款 Angular2+ 表单验证的 npm 包，用于简化表单验证的工作。本文将为大家介绍如何使用 ng2-validation-message 在 Angular2+ 中进行表单验证。
安装
首先，我们需要使用 npm 命令安装 ng2-validation-message 包。使用以下命令即可：
npm install ng2-validation-message --save
引入
在你的 Angular2+ 项目中，你需要在你的模块中引入 ng2-validation-message 包。使用以下命令：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ----------------------- - ---- ------------------------- ----------- ------------- --------------- -------- --------------- ------------ ------------------------- ---------- -------------- -- ------ ----- --------- --展开代码
使用
既然我们已经引入了 ng2-validation-message 包，我们现在就可以开始使用它来进行表单验证。 ng2-validation-message 包中包含了一组 Angular2+ 指令，可以方便地进行表单验证。
1. 使用 validation-message 属性
你可以使用 validation-message 属性来设置表单控件验证失败后的错误信息。 示例代码如下：
<input type="text" [(ngModel)]="username" validation-message="'用户名不能为空'" #usernameControl="ngModel" /> <div *ngIf="usernameControl.errors && (usernameControl.dirty || usernameControl.touched)"> <div *ngIf="usernameControl.errors.required">用户名不能为空</div> </div>
在上面的代码中，我们使用 validation-message 属性来定义了当用户名不合法时的错误信息。然后使用 ngIf 指令和 "required" 来显示错误信息。
2. 使用 validation-messages 属性
你可以为表单中的多个控件一次性定义错误信息。 示例如下：
<input type="text" [(ngModel)]="username" [validation-messages]="{'required': '用户名不能为空'}" />
在这个例子中，我们使用 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
