1. 什么是 az-ng2-dynamic-forms？
az-ng2-dynamic-forms 是一款在 Angular2 中，用于动态生成表单的 npm 包。该包是基于 Angular 动态表单组件的基础上开发而来的，它提供了更为灵活、易用、可定制的动态表单形式，同时能够大幅度减少代码量。
2. 安装与使用
2.1 安装
要使用 az-ng2-dynamic-forms，首先需要进行安装，使用 npm 安装即可：
--- ------- -------------------- ------
2.2 引用
在项目中使用 az-ng2-dynamic-forms，需要在模块中先引入：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - --------------------- - ---- ----------------------- ----------- -------- - -------------- ------------------- -- ------------- - ------------- --------------------- -- ---------- - ------------ - -- ------ ----- --------- - -
2.3 配置
在组件中使用 az-ng2-dynamic-forms，需要先进行一些配置。像下面这样，通过一个 JSON 格式的配置对象，来生成表单。
------ - ---------- ------ - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ------------ - ---- -----------------------
------------
--------- -----------
--------- -
---- ---------------------
-------------- ----------------- ---------------------------------
----
------- -----------------------------
------
-
--
------ ----- ------------ -
------- ----------
------- ----- - -
-
----- --------
------ ----- ------
----- -------
------------ ------ ---- -----
--
-
----- ---------
------ ---------- ------
----- -------
-------- --------- ---- ------ -------------- ----------
------------ ------- -- -------
--
--
------------------- --- ------------ --
---------- -
----------- - ------------------
-
-如上所示，创建了一个表单组件，并传入一段配置信息。配置信息的格式是 JSON，也就是一个包含多个键值对的对象组成的数组。每一个键值对代表一个表单项，在上面我们配置了两个表单项，分别是一个输入框和一个下拉框。
除了这两个表单项，你还可以向你的表单中添加多种其他的组件，例如：
- 单选框
- 复选框
- 单选按钮
- 复选按钮
- 文本框
- 日期选择器
- 等等
完整的 az-ng2-dynamic-forms 表单项类型列表，请移步官方文档。
2.4 演示
编译运行该项目，就可以看到如下的表单：
3. 总结
在本篇文章中，我们学习了 az-ng2-dynamic-forms 的安装、使用、配置，并通过一个表单组件的例子，演示了如何动态生成表单。相对于 Angular 中自带的动态表单组件，az-ng2-dynamic-forms 更加灵活、易用，且可定制性更高，能够大幅度减少代码量。在实际项目中，我们可以更好地利用 az-ng2-dynamic-forms，快速构建出满足需求的表单组件，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c5281e8991b448ebd3e