在 Angular 中动态添加和删除表单字段

在本节中，我们将使用 Angular，以便我们可以从表单中动态添加和删除字段。以下示例对于我们学习这个概念非常有用。我们可以在各种版本的 Angular 中执行此操作，例如 6、7、8 和 9。

在下面的示例中，我们将创建一个包含产品名称的表单。它还将包含“添加多个数量”选项，用户可以在其中选择多个数量及其价格。在我们的 angular 应用程序中，我们将使用 formarray 和 formgroup 创建一个动态表单。为了添加和删除字段，我们将描述一些步骤，如下所示

步骤 1

这是第一步，在此步骤中，我们将导入 FormsModule。

src/app/app.module.ts

步骤 2

在这一步中，我们将更新 TS 文件。为此，我们将使用 angular forms 库来导入 FormArray、FormControl、FormBuilder 和 FormGroup。

src/app/app.component.ts

步骤 3

在此步骤中，我们将创建模板代码。为此，我们将使用 ngModel，以便我们可以编写 html 表单的代码。我们将使用文件 app.component.html 添加以下代码。在我们的以下表单中，我们还可以使用 Bootstrap 类。

src/app/app.component.html

现在，上面的应用程序已准备好运行。以下命令将用于运行我们的上述应用程序。

运行此命令后，将生成以下输出