在前端开发中，我们往往需要构建表单以便收集用户输入，然而构建表单本身并不是一件轻松的事情。针对这个问题，ontimize-web-ngx-dynamicform 是一个不错的 npm 包，它为构建表单提供了一种简单但又易于扩展的方法，而且能够让你专注于业务逻辑。
什么是 ontimize-web-ngx-dynamicform
ontimize-web-ngx-dynamicform (以下简称为 dynamicform) 是一个基于 Angular 9 开发的 npm 包，它提供了一个依赖注入服务（DynamicFormService）和一个组件（DynamicFormComponent）：
- DynamicFormService 是一个服务，里面包含的方法可用于设置表单项的配置、表单数据的初始化等操作。
- DynamicFormComponent 是一个表单组件，它基于配置，使用各种表单字段如文本框、下拉框、日期选择器等构建动态表单。
使用 dynamicform 能够让你的工作效率大大提高，而且可以更好地降低业务代码与表单相关的复杂度。
如何使用 ontimize-web-ngx-dynamicform
下一步我们将会演示如何在你的项目中使用 dynamicform 。
要使用 dynamicform ，你需要先从 npm 仓库中安装它，使用以下命令：
npm install ontimize-web-ngx-dynamicform --save
然后在你的 module 中进行以下导入：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------- -- -- -----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在你可以通过在组件中使用 DynamicFormComponent 来构建你的表单了。
<o-dynamic-form [config]="config" [data]="formData"></o-dynamic-form>
这将会构建一个基于 config 的动态表单。
如何配置 ontimize-web-ngx-dynamicform
以上述方式在组件中使用 DynamicFormComponent 只是实现一个动态表单的最基本的方式，但是我们的目标是实现更复杂的表单。为了实现，我们需要了解如何在 dynamicform 中使用配置。
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------------
----- ------- ----------------- - -
------- -
-
----- -----
------ -----
----- -------
-------- -----
--------- ----
--
-
----- -------
------ -----
----- -------
-------- -----
--------- ----
--
-
----- ---------
------ -----
----- --------
-------- -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- -
--
-------- -----
--------- -----
--
-
----- -----------
------ -----
----- -------------
-------- -----
--------- -----
-
-
--在上面的代码中，我们定义了一个 config 配置对象，通过这个配置对象来构建表单。
每个字段都有几个常规的属性：name，label，type，visible 和 required。
name：字段唯一名称（必填），它和data属性用于绑定表单数据。label：字段的显示文本（可选），用于标记这个字段，提高表单的可读性。type：字段的类型（必填），决定了如何展示表单项。visible：字段是否可见（可选），用于控制表单项的展示。required：字段是否必填（可选），用于控制表单项的验证。
除了上述基本属性之外，每种类型的字段还可以具有它们独特的属性。
在配置对象中，还可以设置一些全局属性，如 submitButtonText，cancelButtonText 或 errorsMessages.
如何进行表单数据管理
在动态表单中，表单数据的管理有时比较困难。例如，你要在动态表单中添加一个新的字段，而且要同时将表单数据与新的表单字段同步更新，这是非常繁琐的。然而 dynamicform 提供了一个 DynamicFormService ，用于帮助我们解决这个问题。
-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------------
----- ------------ -
--------- --- - -----
------- ----------------- - -----
------------------- ------------------- ------------------- - -
---------- -
----------- - -
------- -
-
----- -----
------ -----
----- -------
-------- -----
--------- ----
--
-
----- -------
------ -----
----- -------
-------- -----
--------- ----
-
-
--
------------- - -
--- ------
----- ----- ----
--
-----------------------------------------------
------------------------------------------------------
-
---------- -
----- ----- --- - ----------------------------------
------------------
-
-在以上代码中，我们在 AppComponent 中注入了 DynamicFormService。通过使用 setConfig 方法和 initializeData 方法，我们成功地将表单配置和表单数据进行了初始化。当我们在表单中进行更改时，我们可以通过 getData() 方法获取到表单数据。
如何扩展 ontimize-web-ngx-dynamicform
在 dynamicform 的基础上，我们可以扩展许多自定义字段、自定义组件。例如，我们想要使用 rich-text 编辑器构建表单字段，我们可以使用这个配置：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------
------ - ------------------ ----------------- - ---- -------------------------------
-- -- ---------------- --
-----------
-------- -
--------------
----------------------------
-----------------
-
--
------ ----- --------- - -
-- ---------
------ ----- --------------------- ---------- ----------------------------- -
------ --- -------
------ --------- --- - -----
------------- -
-- ---------------
-
------ ---------------- ---- -------------- ------------------- ---- -
------------- - ---------
------- - ------------------------------------------------
-- ------ ---------------- --
-
------ ---------- ---- -
-- --------------
-
-
----- ------- ----------------- - -
------- -
-
----- ------------
------ ---------
----- ---------
-------- -----
--------- ------
---------------- ---------------------
-
-在以上代码中，我们创建了一个自定义字段，它是一个使用 ngx-quill-editor 构建的富文本编辑器。通过使用 DynamicFormFields 接口，我们创建一个 CustomField 类，然后在 config 中指定它作为一个自定义表单字段。
结尾
ontimize-web-ngx-dynamicform 是一个非常有用和强大的动态表单构建工具，它让我们能够专注于业务逻辑，而不需要花费大量时间在表单构建上。这篇文章介绍了 dynamicform 基本功能和一些高级主题，仅仅是 dynamicform 的入门指南，更多的使用请参考官方文档，了解所有功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b36753