简介
@ng2-dynamic-forms-zrp/ui-ionic 是一个基于 Angular 2 的动态表单组件库。它是一个基于 ngx-dynamic-forms 和 ionic 的 UI 组件库，提供了一些预定义的表单组件，可供开发者快速构建动态表单。
安装
你可以通过 npm 安装 @ng2-dynamic-forms-zrp/ui-ionic
$ npm install --save @ng2-dynamic-forms-zrp/ui-ionic
导入
在你的 Angular 2 项目中，你需要执行以下操作来导入该组件库。
首先，你需要在你的 app.module.ts 中导入该组件库中的 DynamicFormsIonicUIModule:
-- -------------------- ---- -------
------ - ------------------------- - ---- ----------------------------------
-----------
-------- -
-- ---
-------------------------
-
--
------ ----- --------- - -使用
在你的组件中，你可以使用以下代码来创建基于该组件库的动态表单。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ----------------- ----------------- - ---- --------------------------
------ - -------------------------- - ---- ----------------------------------
------------
--------- -
----- ------------------------
------------------- -------------------------------------
-------
-
--
------ ----- ---------------- -
---------- ----------
------ -----------------
------------- -
-------------- - --- --------------
---------- - --- ------------------
--- -------------------
--- ---------------
------ -------- -------
---------- ---
------------ ------ ------- -------
----------- ---
-------------- --
--
---
-
-该组件库中包含了许多预定义的表单组件，如输入框、多选框、单选框等等。可以通过直接使用 DynamicFormModel 来创建需要的表单组件。
示例代码
以下是一个包含多个输入框和按钮的示例动态表单代码。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ----------------- ----------------- - ---- --------------------------
------ - ------------------ - ---- --------------------------
------ - -------------------------- - ---- ----------------------------------
------------
--------- -
----- ------------------------
------------------- ----------------------------------------------
------------------- ---------------------------------------------
---- --------
------- ---------- ------------------------------------
------
-------
-
--
------ ----- ---------------- -
---------- ----------
------ -----------------
--------------- ------------------
-------------- ------------------
------------------- ------------------- ------------------- -
-------------- - --- --------------
------------------- - --- -------------------
--- ------------
------ ------ ------
------------ ------ ---- ----- ------
----------- ---
-------------- --
---
------------------ - --- -------------------
--- -----------
------ ----- ------
------------ ------ ---- ---- ------
----------- ---
-------------- --
---
---------- - --- ------------------
--------------------
------------------
---
-
---------- -
----- --------- - ---------------------
-----------------------
-
-上述代码将创建一个包含两个输入框和一个“提交”按钮的表单。对表单进行验证，并在表单提交时输出表单值。您可以自定义表单组件以满足您的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0481e8991b448d9a1e