在 Angular 应用程序中经常需要实现动态表单，这就涉及到如何根据需要添加或删除表单字段、根据不同条件显示或隐藏表单字段等问题。本文将为大家介绍 Angular 中如何解决动态表单问题，并提供相关示例代码供读者参考。
FormArray
在 Angular 中，我们可以使用 FormArray 来实现动态表单。FormArray 不同于 FormGroup，它可以包含 0 到多个表单控件。我们可以通过以下方式创建一个空的 FormArray：
import { FormArray } from '@angular/forms';
const formArray = new FormArray([]);我们也可以将表单控件添加到 FormArray 中：
formArray.push(new FormControl(''));在示例代码中，我们创建了一个动态的邮箱列表，用户可以点击“添加邮箱”按钮来动态添加邮箱字段。代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ --------- - ---- -----------------
------------
--------- -------------------
--------- -
----- -------------------
---- -----------------------
---- ----------- ----- -- ---------------- --- - - -------
------ ------------ --------------------- --
------
------
------- ------------- ----------------------------------
-------
--
--
------ ----- -------------------- -
---- - --- -----------
------- --- --------------
---
--- -------- -
------ ----------------------- -- ----------
-
---------- -
-------------------- -----------------
-
-在上面的代码中，我们创建了一个 FormGroup，其中包含一个名为 emails 的 FormArray。FormArray 初始化为空。在模板中使用 *ngFor 来循环遍历 FormArray 中的控件，并将每个 FormControl 与一个邮箱输入框绑定。
当用户点击“添加邮箱”按钮时，我们调用 addEmail() 方法来向 emails 中动态添加一个 FormControl。
根据条件显示或隐藏表单字段
在表单中，有时需要根据不同条件动态地显示或隐藏某个字段。我们可以使用 ngIf 指令来动态地添加或删除某个表单字段。
在下面的示例代码中，我们创建了一个表单，根据是否选中“发送邮件”复选框来动态地显示或隐藏邮箱输入框。当用户未选中“发送邮件”复选框时，邮箱输入框会被隐藏。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------------------
--------- -
----- -------------------
------ --------------- --------------------------- --
----
---- --------------------------------------
---------------------
------ ------------ ----------------------- --
------
-------
--
--
------ ----- ------------------------ -
---- - --- -----------
---------- --- -------------------
------ --- ------------- ------ --- --------- ---- ---
---
---------- -
--------------------------------------------------------------- -- -
-- ------------- -
--------------------------------
- ---- -
---------------------------------
-
---
-
-在上面的代码中，我们创建了一个表单，其中包含一个复选框和一个邮箱输入框。当复选框选中时，邮箱输入框会被显示。我们可以使用 valueChanges 事件来监听复选框的状态变化，并根据状态来启用或禁用邮箱输入框的状态。
总结
本文为大家介绍了 Angular 中如何解决动态表单问题，并提供了相关示例代码供读者参考。在开发 Web 应用中，动态表单是非常常见的需求之一。了解 Angular 中如何实现动态表单是一个很有用的技能，希望本文能为大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493d21b48841e989416b2c4