在 Angular 应用中，表单是开发过程中必不可少的一部分。有时候我们需要动态地添加或删除表单元素来满足一些特定的需求。本文将介绍 Angular 中实现表单数据的动态添加和删除的具体方法。
使用 ngFor 指令循环显示表单元素
在 Angular 中使用 *ngFor 指令可以简单快速地循环渲染一个表单元素的列表。首先，在组件中定义表单数据：
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
---- - ---------------
------ -----------------
---
------------------- --- ------------ - -
-上面的代码中，我们使用 Angular 内置的 FormBuilder 创建表单数据。其中，items 是一个 FormArray，用来保存表单元素列表。
接着，在组件的模板文件 form.component.html 中，使用 *ngFor 循环迭代表单元素的列表：
----- -------------------
---- ----------------------
---- ----------- ---- -- --------------------------- --- - - -------
---- --------------------
------ ----------- -----------------------
------ ----------- ------------------------------
------
------
------
-------上述代码中，我们使用 formArrayName 属性将 items 关联到表单，并通过 *ngFor 循环迭代表单元素列表。在 *ngFor 中使用 Index 变量来追踪每个元素的索引。接着，使用 formGroupName 属性将当前表单元素关联到 FormArray 中的指定索引位置。
在表单元素的 HTML 模板中，只需简单地声明表单元素的输入控件即可。
实现动态添加表单元素
在 Angular 中，实现动态添加表单元素需要做两件事：
- 在表单中添加新的输入控件。
- 在表单数据对象中添加新的元素。
在表单中添加新的输入控件
我们可以在 HTML 模板中声明一个“添加”按钮，用来新增表单元素。点击该按钮后，我们要动态地添加新的输入控件。
使用以下代码，增加自定义添加和删除功能：
------- ----------------------- -------------
---- ----------------------
---- ----------- ---- -- --------------------------- --- - - ------ --------------------
------ ----------- -----------------------
------ ----------- ------------------------------
------- ------------------------------ -------------
------
------接下来在组件中，创建 addItem() 方法用来添加表单元素：
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
---- - ---------------
------ -----------------
---
------------------- --- ------------ - -
--------- -
----- ---- - ---------------
----- -----
------------ ----
---
----------------------
-
--- ------- -
------ ---------------------- -- ----------
-
-在 addItem() 方法中，首先创建 FormGroup 对象，并添加每个表单元素所需要的输入控件。然后将新创建的表单元素添加到 items 数组中。
在表单数据对象中添加新的元素
现在，我们已经在表单中完成了新表单元素的添加。但表单数据对象中还没有添加这个新元素。我们需要通过 FormGroup 的 push 方法将新元素添加到 FormArray 中。
在 addItem() 方法中，添加以下代码：
--------- -
----- ---- - ---------------
----- -----
------------ ----
---
----------------------
-在上述代码中，我们首先创建一个新的表单元素，并将其添加到单个项目列表数组中。
实现动态删除表单元素
与动态添加类似，我们同样需要两个步骤来删除表单元素：
- 从表单中删除输入控件。
- 从表单数据对象中删除该元素。
现在我们在表单数据对象中添加了新元素。我们接下来修改 removeItem() 方法来从表单数据对象中删除该元素：
----------------- ------- - --------------------------- -
在上述代码中，我们使用 removeAt 方法从 FormArray 中删除指定索引处的元素。
完整代码如下：
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
---- - ---------------
------ -----------------
---
------------------- --- ------------ - -
--------- -
----- ---- - ---------------
----- -----
------------ ----
---
----------------------
-
----------------- ------- -
---------------------------
-
--- ------- -
------ ---------------------- -- ----------
-
-结论
在本文中，我们讨论了如何在 Angular 应用中实现表单数据的动态添加和删除。我们首先讲解了如何使用 FormArray 和 *ngFor 指令来循环渲染表单元素。接着，我们实现了动态添加和删除表单元素的过程。
以上操作可以动态生成表单，并且也可以方便地添加或删除表单项。希望这篇文章可以帮助你更好地理解 Angular 中表单元素的动态操作，让你的代码更加优雅和易维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b4e1dddd3a70eb6d2722a