在使用 Angular 2 开发 Web 应用过程中，表单是不可避免的一部分。要让表单交互变得更加容易，ng2-form-helper 应运而生。用它来简化表单元素的使用和管理，可以让前端开发者能够更加专注于业务逻辑的实现。
安装
使用 npm 安装 ng2-form-helper，只需要在项目根目录下运行以下命令：
npm install ng2-form-helper --save
用法
在使用 ng2-form-helper 之前，需要在应用的 NgModule 中引入 FormsModule。接着，在组件里通过引入 FormBuilder 和 FormHelper 来创建表单。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------ - ---------- - ---- ------------------
------------
--------- ---------
--------- -
----- ---------------------
-------
-----
------ ----------- -----------------------
--------
-------
------
------ ----------- ------------------------
--------
------- ------------- ----------------------------------
-------
--
--
------ ----- ------------ -
------- ----------
------------------- --- ------------ ------- ------- ----------- -
----------- - ---------------
----- ---- ------------------------
------ ---- ------------------------ ---------------------
---
-
-------- -
-- ------------------- -
----------------- -- --------
-
-
-上面的例子中，我们创建了一个名为 myForm 的表单，其中包含了 name 和 email 两个表单元素。在表单元素对象中定义了验证器对象，通过传入 FormHelper 提供的验证器来完成表单元素的验证。
FormHelper 提供了很多验证器，包括：
- required：必填字段；
- minLength：最小长度；
- maxLength：最大长度；
- pattern：正则表达式模式；
- email：邮箱地址；
有了这些验证器，就可以轻松实现表单元素的验证。
更多示例
下面是另一个示例，用来创建一个选择性别的单选框表单组件。在这个组件中，我们使用 FormHelper.conditional() 创建了一个已选的元素。同样地，我们使用了 FormHelper.required() 和 FormHelper.validator() 来实现表单验证。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------ - ---------- - ---- ------------------
------------
--------- ---------
--------- -
----- ---------------------
---- -------------------
-------------------
------ ------------ ------------ -------------------------
------
---- -------------------
---------------------
------ ------------ -------------- -------------------------
------
------- ------------- ----------------------------------
-------
--
--
------ ----- ------------ -
------- ----------
------------------- --- ------------ ------- ------- ----------- -
----------- - ---------------
------- ---- ---------------------------------------------- -------------------------------------------
---
-
---------------- -
------ ------
-
-------- -
-- ------------------- -
----------------- -- --------
-
-
-总结
ng2-form-helper 提供了丰富的表单验证功能，使得前端开发人员可以更加专注于业务逻辑的实现。在使用该 npm 包的过程中，需要注意在 NgModule 中引入 FormsModule，并按照顺序定义表单元素和验证器。希望本篇文章能够对 Angular 2 开发人员有所指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e3fb81d47349e53e26