@ng2-dynamic-forms-zrp/core 是一个 Angular 2+ 的动态表单生成 npm 包，可以通过 JSON 数据自动渲染表单。这个 npm 包的优点在于可以快速生成表单，轻松实现前端开发需求。
安装
安装命令：npm install --save @ng2-dynamic-forms-zrp/core
快速开始
- 定义表单 JSON 数据：
-- -------------------- ---- -------
----- -------------- --- - -
------------ -------
----------- ------
-------- -----------------------
--------- -------
---------- -
--------- ---- ---- -----
------- ----------
-------- -
------- -----
------- ------------
--
------ -------
-
--- 在需要使用的组件中引入必要的包：
import { DynamicFormService, DynamicFormControlModel } from '@ng2-dynamic-forms-zrp/core';- 定义表单控件模型：
-- -------------------- ---- -------
----- -------- ------------------------- - -
--- -------------------
--- ------------
------ ------ ------
---------- ---
------------ ------ ---- ----- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- -----------
------ ----- ------
---------- ---
------------ ------ ---- ---- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- --------
------ --------
---------- ----
------------ ------ ---- ----- ---------
----------- -
--------- -----
------ ----
--
-------------- -
--------- --- ----- -- -- -----------
------ ------- ----- - ----- ----- ---------
-
---
--- --------------------------------
--- ---------
------ ---------
-------- -
-
------ -------
------ ------
--
-
------ ---------
------ --------
-
--
------ -------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -----------------------
--- ----------
------- ----------
------ -
--- -------------------
--- ---------
------ ---------
---------- ----
------------ ------ ---- ------ ---------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- -------
------ -------
---------- ---
------------ ------ ---- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- --------------------
--- --------
------ --------
-------- -
-
------ ----------
------ ----
--
-
------ ---------
------ ----
--
---
--
------------ ------- ---- -------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- ------
------ ------
---------- ---
------------ ------ ---- --- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
--
-
--
--- 使用 DynamicFormService 渲染表单：
-- -------------------- ---- -------
------------
--------- ---------
--------- -
----- --------------------------
------------- ------------------------- -----------------------------------------
------- ---------- ------------ -----------------------------------------------
-------
-
--
------ ----- ------------ -
------------ ----------
------------ --------------------------
------------------- ------------ ------------------- -
---------------- - ------------------------------------------
---------------- - --------
-
-示例
这是一个简单的例子，展示了如何使用 @ng2-dynamic-forms-zrp/core 渲染动态表单。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ------------------- ----------------------- - ---- ------------------------------
------ - ------------------ ----------------------- --------------------- - ---- ------------------------------
----- -------------- --- - -
------------ -------
----------- ------
-------- -----------------------
--------- -------
---------- -
--------- ---- ---- -----
------- ----------
-------- -
------- -----
------- ------------
--
------ -------
-
--
----- -------- ------------------------- - -
--- -------------------
--- ------------
------ ------ ------
---------- ---
------------ ------ ---- ----- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- -----------
------ ----- ------
---------- ---
------------ ------ ---- ---- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- --------
------ --------
---------- ----
------------ ------ ---- ----- ---------
----------- -
--------- -----
------ ----
--
-------------- -
--------- --- ----- -- -- -----------
------ ------- ----- - ----- ----- ---------
-
---
--- --------------------------------
--- ---------
------ ---------
-------- -
-
------ -------
------ ------
--
-
------ ---------
------ --------
-
--
------ -------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -----------------------
--- ----------
------- ----------
------ -
--- -------------------
--- ---------
------ ---------
---------- ----
------------ ------ ---- ------ ---------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- -------
------ -------
---------- ---
------------ ------ ---- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- --------------------
--- --------
------ --------
-------- -
-
------ ----------
------ ----
--
-
------ ---------
------ ----
--
-
------ -------------
------ ----
--
-
------ ----------
------ ----
--
-
------ ---- ------
------ ----
-
--
------------ ------- ---- -------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
---
--- -------------------
--- ------
------ ------
---------- ---
------------ ------ ---- --- ------
----------- -
--------- ----
--
-------------- -
--------- --- ----- -- -- ----------
-
--
-
--
--
------------
--------- -----------
--------- -
----- --------------------------
------------- ------------------------- -----------------------------------------
------- ---------- ------------ -----------------------------------------------
-------
-
--
------ ----- ------------ -
------------ ----------
------------ --------------------------
------------------- ------------ ------------------- -
---------------- - ------------------------------------------
---------------- - --------
-
-总结
通过上述的学习，我们可以看出使用 @ng2-dynamic-forms-zrp/core 可以快速生成表单，轻松实现前端开发需求。同时，本文也提供了详细的示例代码和使用教程，可以作为参考来帮助开发人员更好地理解该 npm 包的优势和使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0481e8991b448d9a1f