1. 前言
ng2-form-control-errors 是一个 Angular2 项目中常用的 npm 包，它能够帮助前端开发者在表单验证中更加便捷地处理错误信息。今天我们就来详细讲解一下这个 npm 包的使用方式。
2. 安装
安装 ng2-form-control-errors 很简单，只需要在命令行中输入以下命令即可：
npm install ng2-form-control-errors --save
3. 使用
3.1 导入模块
在使用 ng2-form-control-errors 之前，我们需要先将其导入到我们项目的模块中。打开模块文件，在其中添加以下代码：
-- -------------------- ---- -------
------ - ------------ ------------------- - ---- -----------------
------ - ---------------- - ---- --------------------------
-----------
-------- -
--------------
------------
--------------------
----------------
--
-- ------
--
------ ----- --------- - -3.2 添加指令
在 HTML 中添加 ng2-form-control-errors 指令可以实现自动化的表单验证错误信息提示。我们可以在表单组件中为每个表单控件添加 ng2-form-control-errors 指令。以下是 ng2-form-control-errors 的基本用法：
<form #form="ngForm">
<input type="text" name="username" ngControl required maxlength="16"
[formControlErrors]="{ required: '用户名不能为空', maxlength: '用户名长度不能超过16个字符' }">
<form-control-errors [control]="form.controls.username"></form-control-errors>
</form>上面这段代码主要做了以下几件事情：
- 定义了一个表单（form）。
- 在表单中定义了一个 input（name="username"）。
- 给这个 input 添加了 ngControl、required 和 maxlength 等属性。
- 为该 input 添加了 formControlErrors 属性，定义了该 input 所要进行的所有验证规则与每种规则所需要展示的错误信息。
- 在该 input 下方添加了一个 form-control-errors 标签，并设置了该标签所要绑定的表单控件。
3.3 自定义样式
ng2-form-control-errors 会根据不同的验证规则和验证结果为文本节点添加相应的样式名，我们可以通过给这些样式名定义不同的样式来实现自定义表单验证错误信息的样式。以下是一个自定义表单验证错误信息的文件：
-- -------------------- ---- -------
------------------- -
-------- ------
------ --------
-------- -
-------- ------
-
--------- -
-------- -
-------- ----
-------- -------------
------ --------
-------------- ----
-
-
----------- ---------- -
-------- -
-------- ----
-------- -------------
------ --------
-------------- ----
-
-
-4. 总结
ng2-form-control-errors 是一个非常实用的 npm 包，可以帮助前端开发者更加便捷地处理表单验证错误信息。在日常的开发中，我们可以通过导入 ng2-form-control-errors 包和添加指令的方式来实现表单验证错误信息的自动化展示。同时，我们也可以通过自定义样式来实现自定义错误信息的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ad81e8991b448deecf