在 Angular 应用程序中，表单是非常重要的组成部分。Angular 提供了一些内置指令和服务，可以轻松地创建、验证和处理表单数据。但是，在某些情况下，我们需要动态地创建表单，这时候就需要使用 Angular 7 中的动态表单处理技术。
什么是动态表单？
动态表单指的是在运行时动态地创建表单控件和表单组。这意味着我们可以根据用户的输入或其他条件来创建表单。这种方法非常灵活，可以用于处理各种复杂的表单场景。
Angular 中的动态表单
在 Angular 中，我们可以使用 FormGroup 和 FormControl 类来创建表单组和表单控件。FormGroup 表示一组表单控件，FormControl 表示一个表单控件。我们可以在 TypeScript 代码中定义 FormGroup 和 FormControl，然后在 HTML 模板中使用它们来创建表单。
但是，当我们需要动态地创建表单时，我们需要使用 FormBuilder 服务。FormBuilder 是 Angular 中的一个内置服务，它提供了一些方法来帮助我们构建表单。通过使用 FormBuilder，我们可以轻松地创建表单组和表单控件，而不需要在 TypeScript 代码中定义它们。
如何使用 FormBuilder 创建动态表单
首先，我们需要在组件中注入 FormBuilder 服务。我们可以在组件的构造函数中注入 FormBuilder，如下所示：
-- -------------------- ---- -------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- --------------- ---------- ------ -
------- ----------
------------------- --- ------------ - -
---------- -
-- - -------- -------
-
-在 ngOnInit 方法中，我们可以使用 FormBuilder 的 group 方法来创建一个 FormGroup。group 方法接受一个对象作为参数，该对象的键表示表单控件的名称，值表示表单控件的初始值和验证规则。例如，我们可以创建一个包含两个表单控件（name 和 email）的表单组，如下所示：
ngOnInit() {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}在 HTML 模板中，我们可以使用 formGroup 指令将 FormGroup 绑定到表单元素上，使用 formControlName 指令将 FormControl 绑定到表单控件上。例如，我们可以创建一个包含两个文本框的表单，如下所示：
-- -------------------- ---- -------
----- ---------------------
-------
-----
------ ----------- -----------------------
--------
-------
------
------ ------------ ------------------------
--------
-------动态添加表单控件
现在，我们已经创建了一个静态表单，但是在某些情况下，我们需要动态地添加表单控件。例如，当用户单击“添加”按钮时，我们需要添加一个新的文本框。在这种情况下，我们可以使用 FormBuilder 的 addControl 方法来添加表单控件。
例如，我们可以创建一个包含“添加”按钮的表单，并在单击该按钮时添加一个新的文本框，如下所示：
-- -------------------- ---- -------
----- ---------------------
-------
-----
------ ----------- -----------------------
--------
-------
------
------ ------------ ------------------------
--------
------- -----------------------------------
-------在组件中，我们可以定义 addControl 方法，该方法使用 FormBuilder 的 addControl 方法添加新的表单控件。例如，我们可以添加一个新的文本框，其名称为“phone”，如下所示：
addControl() {
this.myForm.addControl('phone', this.fb.control(''));
}现在，当用户单击“添加”按钮时，表单中将会出现一个新的文本框。
动态删除表单控件
除了添加表单控件外，我们还可以动态地删除表单控件。例如，当用户单击“删除”按钮时，我们需要删除一个文本框。在这种情况下，我们可以使用 FormBuilder 的 removeControl 方法删除表单控件。
例如，我们可以创建一个包含“删除”按钮的表单，并在单击该按钮时删除名为“phone”的文本框，如下所示：
-- -------------------- ---- -------
----- ---------------------
-------
-----
------ ----------- -----------------------
--------
-------
------
------ ------------ ------------------------
--------
------ ----------- ----------------------- ------------------------------
------- -----------------------------------------
-------在组件中，我们可以定义 removeControl 方法，该方法使用 FormBuilder 的 removeControl 方法删除名为“phone”的表单控件。例如，我们可以删除名为“phone”的文本框，如下所示：
removeControl() {
this.myForm.removeControl('phone');
}现在，当用户单击“删除”按钮时，名为“phone”的文本框将会被删除。
总结
在本文中，我们介绍了 Angular 7 中的动态表单处理技术。我们学习了如何使用 FormBuilder 创建动态表单，如何动态添加表单控件和如何动态删除表单控件。动态表单处理技术非常灵活，可以用于处理各种复杂的表单场景。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e295c11886fbafa4f3f60d