介绍
@wf-dynamic-forms/ui-primeng 是一个基于 Angular 和 PrimeNG 的可动态渲染表单控件包，它包含了大量的表单控件，例如输入框、下拉框、日期选择器等，可以非常方便地集成并使用。使用该包可以大大减少表单构建和解析的耗时，同时也能够有效提升开发效率。
安装
通过 NPM 或者 Yarn 来安装 @wf-dynamic-forms/ui-primeng:
npm install @wf-dynamic-forms/ui-primeng --save
yarn add @wf-dynamic-forms/ui-primeng
使用
首先，在需要使用上述表单控件的模块中导入 @wf-dynamic-forms/ui-primeng：
import { DynamicFormsCoreModule } from "@wf-dynamic-forms/core";
import { DynamicFormsPrimeNGUIModule } from "@wf-dynamic-forms/ui-primeng";接着，在模块的 imports 数组中引入 DynamicFormsCoreModule 和 DynamicFormsPrimeNGUIModule：
-- -------------------- ---- -------
-----------
-------- -
---------------------------------------
----------------------------------
---
--
---
--
------ ----- --------- -
---
-最后，在模板文件中使用控件：
<lib-dynamic-form-control [group]="formGroup" [model]="model"></lib-dynamic-form-control>
具体使用方法详见 官方文档.
深度
动态生成表单
@wf-dynamic-forms/ui-primeng 具有极高的灵活性，允许动态生成表单，多种自定义组件，自定义验证器等。
功能强大的控件
@wf-dynamic-forms/ui-primeng 包含了大量的表单控件，满足了大部分的需求。
学习指导
在使用 @wf-dynamic-forms/ui-primeng 进行表单构建时，开发者需要先了解 Angular 和 PrimeNG 中相关的知识点，这些知识点的掌握有助于快速入手开发。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- -----------------
------ - --------- - ---- ----------------
------ - ----------------- ------------------- ----------------- - ---- -------------------------
------ - -------------- - ---- -------------------
------ - ----------------- - ---- ----------------------
------ - ------------------ - ---- -----------------------
------ - -------------- - ---- -------------------
------ - -------------- - ---- -------------------
------------
--------- ------------------
--------- -
----- ------------------------
------------------------- ------------------- -------------------------------------------
-------
-
--
------ ----- ----------------------- -
------ ---------------- - -
--- -------------------
--- ------------
------ ------ ------
------------ ------ ---- ----- ------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- -----------
------ ----- ------
------------ ------ ---- ---- -----
---
--- -------------------
--- --------
------ ------ ---------
------------ ------ ---- ----- ---------
----------- -
------ ----
--
-------------- -
------ ---------- -- --- ------
-
---
--- -------------------
--- --------
------ ------ --------
------------ ------ ---- ----- --------
---------- --- ----- ---------
---
--- -------------------
--- ----------
------ ----------
------------ ------ ---- --------
---
--- -------------------
--- -------
------ -------
------------ ------ ---- -----
---
--- -------------------
--- --------
------ --------
------------ ------ ---- ------
---
--- -------------------
--- ----------
------ ---- ------
------------ ------ ---- --- ------
---------- -------
---
--- -------------------
--- ----------
------ ----------
------------ ------ ---- --------
---
--- -------------------
--- -----------
---------- -----------
------ -----------
------------ ------ ---- ---------
---
--- -------------------
--- ------------------
---------- -----------
------ -------- ----------
------------ ------ ---- -------- -------
----------- -
------- ------- -- -
------ ----- --- -------------------------------------
-
--
-------------- -
------- ---------- -- --- ------
-
---
--- -------------------
--- -----------
------ -----------
------------ ------- ---- ----------
---------- -------
----------------- -
-------------- ------
--------- -----
----------- ----------
-
---
--- -------------------
--- ---------
------ ---------
------------ ------- ---- --------
---------- -----------
-------- -
- ------ ------- ------ ------ --
- ------ --------- ------ -------- -
-
---
--- -------------------
--- ------------
------ ------------
------------ ------- ---- -----------
---------- --------------
-------- -
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
- ------ -------- ------ ------- --
- ------ -------- ------ ------- -
-
---
--- -------------------
--- -----------------
------ --------- --------
------------ ------- ---- -------- --------
---------- ---------------
-------- -
- ------ ------------- ------ ------------ --
- ------ ----------- ------ ---------- --
- ------ --------- ------ -------- --
- ------ ----------- ------ ---------- -
-
---
--- -------------------
--- --------
------ ------ --- ------------
---------- -----------
------ ------
----------- -
------------- ----
--
-------------- -
------------- ---------- ---- -- ---------
-
--
--
---------- ----------
------------------- ------------ ------------------- -
-------------- - ---------------------------------------------
-
-
通过上述示例代码，就可以快速而且易用地构建 Angular 表单，大量减少表单构建和解析的耗时，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822666