在前端领域，表单一直是一个不可避免的话题。在实际的开发过程中，大多数的表单都有一定的可重复性，例如添加多个联系人、上传多张图片等。在 Angular 中，我们可以使用 ngFor 指令来处理这样的重复表单，并且可以在表单中使用 ngModel 进行双向数据绑定。本文将介绍如何在 Angular 中实现可重复性表单，包含了详细的内容和示例代码。
双向数据绑定
在 Angular 中，双向数据绑定是一个强大的功能。它可以让我们轻松地从表单元素中读取值，然后将这些值保存到组件中。同时，它还能让我们轻松地将组件中存储的值渲染到表单元素中，使表单元素的值与组件中的值保持同步。
实现双向数据绑定需要使用 ngModel 指令。例如：
<input [(ngModel)]="name">
这里，我们将一个叫做 name 的属性与一个输入框双向绑定。每当用户在输入框中输入内容时，Angular 就会自动将输入框中的值保存到 name 属性中。同时，Angular 还会自动将 name 属性的值渲染到输入框中，使输入框的值与 name 属性保持同步。
ngFor 指令
ngFor 指令是 Angular 中一个常用的指令，它可以让我们轻松地创建一个可重复的模板。通常情况下，我们使用 ngFor 来遍历一个数组，并将数组中的每个元素渲染成一个模板。例如：
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>这里，我们将 items 数组中的每个元素渲染成一个列表项。Angular 会自动为每个列表项生成一个独立的作用域，这意味着每个作用域中都有一个指向当前元素的变量 item，我们可以在模板中使用这个变量来访问元素的属性和方法。
可重复性表单
有时候，我们需要在表单中添加多个相似的元素，例如：
- 添加多个联系人
- 上传多张图片
- 输入多个选择项
在这种情况下，我们可以使用 ngFor 指令来创建一个可重复的表单。首先，我们需要创建一个包含所有可重复的元素的数组。然后，我们可以使用 ngFor 指令遍历这个数组，为数组中的每个元素创建一个表单元素。在表单中，我们可以使用 ngModel 指令双向绑定表单元素与数组元素的值，使表单元素的值与数组元素的值保持同步。
以下是一个示例代码，展示了如何在 Angular 中创建一个可重复性联系人表单：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
------
---- ----------- ------- -- ----------
--------------------
------ ---------------------------
---------------------
------ ----------------------------
------
------- -------------------------- ----------------
------- ----------------------------------
-------
-
--
------ ----- -------------------- -
-------- - -
------ --- ------ ----
------ --- ------ ---
--
------------ -
------------------------- --- ------ -----
-
-------- -
---------------------------
-
-在这个示例中，我们创建了一个包含两个联系人的数组，然后使用 ngFor 指令创建了一个可重复性表单。用户可以在表单中填写每个联系人的姓名和电话，并且可以使用 Add Contact 按钮动态地添加更多的联系人。当用户提交表单时，我们将所有联系人的信息打印到控制台中。
指导意义
本文介绍了如何在 Angular 中实现可重复性表单。我们可以使用 ngFor 指令遍历一个数组，并创建一个可重复的表单。使用 ngModel 指令实现双向数据绑定，使表单元素的值与数组元素的值保持同步。这种技术可以用于多种用途，例如创建可重复性联系人表单、上传多个图片、输入多个选择项等。它可以使我们的工作更加简单，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9c91ae46428fe9e19e5bf
