io-ng-dynamic-forms 是一个 Angular Smart 组件库，用于设计和生成动态表单。它允许你在运行时根据数据生成表单。要使用 io-ng-dynamic-forms，你需要运行最新版的 Angular，并安装 io-ng-dynamic-forms 包。本文将介绍如何安装和使用 io-ng-dynamic-forms 包生成动态表单，以及如何使用其 API 扩展其功能。
安装 io-ng-dynamic-forms
通过以下命令来安装最新版本的 io-ng-dynamic-forms 包：
npm install io-ng-dynamic-forms --save
在应用程序的模块中导入 DynamicFormsCoreModule，以确保可以使用使用此库中的组件和服务：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------------- - ---- --------------------------- ----------- -------- --------------- ------------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
基本使用
假设你的应用程序需要一个表单，其中包括用户的名字，电子邮件，地址和省份名称。你可以通过代码来生成这个表单，也可以在运行时使用 io-ng-dynamic-forms 生成此表单。下面的代码展示了这样做的方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ------------------ - ---- ---------------------------
------ - ---------- - ---- --------------------------------
------------
--------- -----------
--------- -
----- ------------------------
---------------------- ----------- ----- -- ------- - ------ --------------- --------------------------------------------
-------
-
--
------ ----- ------------ -
---------- ----------
------- - ------------------------------------
------------------- ------------------- ------------------- -
-------------- - --------------------------------------------
------------------------------------------------------ ------- ----- ------
------------------------------------------------------ -------- ------------------------
------------------------------------------------------ ---------- ---- ---- ------
------------------------------------------------------ ----------- -----------
-----------------------------------
------------
---- -------
----------- -- ----- ---------- --
---
------------
---- --------
----------- -
- ----- ---------- --
- ----- ------- -
-
---
------------
---- ---------
---
------------
---- ----------
--
---
-
-使用此示例代码，生成的表单将包含四个文本输入字段，每个字段都带有一个标签、占位符和值。填写表单时，表单控件的值将写入表单的 FormGroup 中，可以通过使用 this.formGroup.value 来访问。
使用布局
io-ng-dynamic-forms 还支持在表单中使用布局渲染输入字段。你可以使用 DynamicFormsBootstrapUIModule 模块导入支持 Bootstrap 的布局：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ----------------------------- - ---- ----------------------------------- ----------- -------- --------------- -------------------- ------------------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
更新示例代码，将以下 html 代码作为模板：
<div class="container">
<form [formGroup]="formGroup">
<form-io-bootstrap *ngFor="let row of rows$ | async" class="row" [group]="formGroup" [row]="row"></form-io-bootstrap>
</form>
</div>此代码在应用程序中使用了 Bootstrap 样式。它通过 form-io-bootstrap 指令将表单控件放入 Bootstrap 栅格卡片中。
在 addFields() 方法中，你可以将每个控件绑定到栅格尺寸中：
-- -------------------- ---- -------
-----------------------------------
-
---- -------
----- --------
---------------- -
------ ----- ---
--------- ----
--
----- -
-------- ----------
--
----------- ------- ----------- -------- ------- ----- ---- --------
--
-
---- --------
----- --------
---------------- -
----- --------
------ ------ ---
--------- ----
--
----- -
-------- ----------
--
----------- ------- ----------- -------- ------- ----- ---- ---------
--
-
---- ----------
----- --------
---------------- -
------ ---------
--
----- -
-------- ----------
-
--
-
---- -----------
----- --------
---------------- -
------ ----------
--
----- -
-------- ----------
-
-
---更新这行代码以查看更新后的表单。现在，在运行时生成的表单中包含 Bootstrap 样式的布局。在模板中使用 form-io-bootstrap 指令，你可以在表单的每个字段周围添加 Bootstrap 水平形式、标签、验证器和更多。
结论
io-ng-dynamic-forms 是一个有用的库，可以在运行时生成动态 Angular 表单。在本文中，我们介绍了如何安装和使用 io-ng-dynamic-forms，以及如何与 Bootstrap 布局协作。此外，这个库还提供了一个强大的 API，你可以使用它来自定义功能，以适应你的项目需要。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cea81e8991b448e69f9