前言
在前端开发中，创建表单是一项基本技能。然而，如果需要同时创建多个表单，或者需要动态地在用户交互时创建表单，则需要使用动态表单。此时，@ng2-dynamic-forms/core是一款非常好用的npm包。在本文中，我们将详细介绍如何使用@ng2-dynamic-forms/core来创建表单。
@ng2-dynamic-forms/core简介
@ng2-dynamic-forms/core是一个Angular模块，在ng2+版本中使用，可以实现动态表单的创建。该模块提供了一套API，可以使用这些API来创建各种类型的表单控件，并实现这些表单控件的交互。
安装@ng2-dynamic-forms/core
使用npm安装即可：
npm install @ng2-dynamic-forms/core
在安装完成后，我们需要在Angular项目中导入该模块。
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------------
-----------
-------- -
--------------
-----------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -创建动态表单
现在，我们已经完成了@ng2-dynamic-forms/core的安装和导入，可以开始创建动态表单。
步骤1：定义表单的key-value对
在Angular中，动态表单的创建过程是基于节点树的。为了创建节点树，我们需要首先定义一个键-值对，来表示节点的类型和其值。例如，在下面的示例中，我们为其添加一个包含多个键值对的对象，以表示需要创建的表单。
-- -------------------- ---- -------
------ ----- ------------- - -
------------ -------
----------- ------
-------- ---------------
----------- -------
--------- ---------
-------------- -----
---------- -
--------- ---- ---- ----
------ --------
------- ----------
-------- ----
-
--步骤2：使用@ng2-dynamic-forms/core创建表单
在定义好key-value对后，我们需要使用@ng2-dynamic-forms/core模块中的createFormGroup方法来创建表单控件树。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ------------------ - ---- --------------------------
------------
--------- ----------
--------- -
----- ------------------------
---- ---- ---- -------- -- ---- ---
-------
-
--
------ ----- --------------- -
------ ---------- ----------
------------------- ------------------- ------------------- -
--- --------------- - -------------------------------------------------------
-------------- - --- ---------------------------
-
-createFormGroup要求我们传入一个key-value对。该方法会返回一个表示表单控件树的对象。一旦我们有了这个表单控件树的对象，就可以使用它来创建Angular表单。
步骤3：创建表单控件
现在我们已经有了表单控件树的对象，可以基于它来创建表单控件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ------------------- ----------------------- - ---- --------------------------
------------
--------- ----------
--------- -
----- ------------------------
------------- ------------------- -----------------------------------
---- ---- ------ ------ ---- ---- ---
-------
-
--
------ ----- --------------- -
------ ---------- ----------
------ ---------- --------------------------
------------------- ------------------- ------------------- -
-------------- - --------------------------------------------------------------
--- --------------- - -------------------------------------------------------
-------------- - --- ---------------------------
-
-相比之前的示例，我们多了两行代码。第一行使用createFormControlModel方法创建表单控件的模型，第二行将表单控件的模型添加到表单中。
支持的表单控件类型
@ng2-dynamic-forms/core支持多种表单控件类型，包括：输入框、下拉列表、单选框、复选框以及文本域。以下是一份完整的支持表单控件类型的列表：
- Input
- Textarea
- Checkbox
- Radio group
- Select
- File upload
- Range
- Calendar
- Checkbox group
- Input mask
- Input switch
- Slider
示例
前面我们已经简单地介绍了如何使用@ng2-dynamic-forms/core来创建表单控件。以下是一个更详细的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - ------------------- ------------------------ ------------------ --------------------- ------------------ ---------------------- - ---- --------------------------
------------
--------- ----------
--------- -
----- ------------------------
------------- ------------------- -----------------------------------
------- -----------------------------
-------
-
--
------ ----- --------------- -
------ ---------- ----------
------ ---------- --------------------------
------------------- ------------------- ------------------- -
----- -------------- -------------------------------- - -
-
------ ---------
------ ---------
--
-
------ ------------
------ -----------
--
-
------ -------
------ ------
-
--
----- --------------- -------------------------------- - -
-
------ -------
------ -------
--
-
------ ---------
------ --------
-
--
-------------- - -
--- -------------------
--- ------------
------ ------ ------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- -----------
------ ----- ------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- --------
------ --------
----------- -
--------- -----
------ ----
--
-------------- -
--------- ---------- -- ----------
------ ------- ----- - ----- ----- --------
-
---
--- -------------------
--- -----------
------ -----------
---------- -----------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- ------------------------
--- ---------
------ ---------
-------- ---------------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- ----------------------
--- --------------
------ ---- ---- -- ------- -------------
---
--- --------------------
--- --------
------ ----- -- -------
-------- --------------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- -----------------
------ ---------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- --------------
------ ---- ------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- ---------------
------ -------
----------- -
--------- ----
--
-------------- -
--------- ---------- -- ---------
-
---
--- -------------------
--- ----------------
------ --------
----------- -
--------- -----
---------- -
--
-------------- -
--------- ---------- -- ----------
---------- -------- ------ -- --
-
--
--
--- --------------- - --------------------------------------------------------
-------------- - --- ---------------------------
-
---------- -
----------------------------------
-
-结论
使用@ng2-dynamic-forms/core可以轻松地创建动态表单。该npm包支持各种类型的表单控件，并支持多种验证类型。在实际使用中，我们可以通过定义key-value对、使用createFormGroup方法以及使用createFormControlModel方法来创建动态表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24486e