作为前端开发人员，我们都知道表单在Web应用程序中扮演着十分重要的角色。表单不仅提供了与用户交互的途径，它也是应用程序能够收集数据并在后台进行处理的关键。
Angular框架提供了强大的反应式表单模块，使得表单处理变得更加便捷和可靠。虽然Angular反应式表单非常强大，但是它对于嵌套表单的处理仍然存在一些困难。
为了解决这个问题，@webdev-tools开发团队推出了一个npm包：@webdev-tools/ng-nested-reactive-forms。该npm包可用于Angular应用程序中，提供了一种更加容易处理嵌套表单的方式。
在本文中，我们将介绍如何使用@webdev-tools/ng-nested-reactive-forms，以便更好地处理Angular应用程序中的表单。
安装和引入
在我们可以开始使用@webdev-tools/ng-nested-reactive-forms之前，我们需要先安装它。通过运行以下命令，我们可以安装它：
npm install @webdev-tools/ng-nested-reactive-forms --save
接下来，我们需要将它引入我们的Angular模块中。这可以通过打开模块文件并添加以下两行代码实现：
-- -------------------- ---- -------
------ - ------------------------- - ---- -----------------------------------------
---
-----------
---
-------- -
---
--------------------------
---
--
---
--
------ ----- --------- - -索引中引用的模块中，@webdev-tools/ng-nested-reactive-forms将会可用。
使用
@webdev-tools/ng-nested-reactive-forms包提供了两个主要的指令：ng-nested-form和ng-nested-control。它们都被设计为与Angular反应式表单的API相似，以便我们可以毫不费力地在应用程序中使用它们。
NgNestedForm指令
表单本质上是Web应用程序中的一个组件，它可以包含输入元素，如输入框、单选按钮、复选框等。和其他组件一样，我们需要在其上下文中声明一个组件，一种方法是使用Angular的ngForm指令。
ng-nested-form指令的作用是让我们处理嵌套表单变得更加容易。该指令的语法如下：
<form ng-nested-form [formGroup]="myFormGroup"> ... </form>
在上面的代码中，我们可以看到ng-form指令的形式非常类似于Angular环境中的ng-form指令。唯一的区别是我们使用ng-nested-form而不是ng-form。我们还可以看到，我们必须将一个formGroup实例绑定到指令上，以将表单与我们的组件中的反应式表单关联起来。
NgNestedControl指令
在Angular反应式表单中，我们可以使用FormGroup实例来表示表单，FormControl实例来表示表单中的单个控件。因为表单通常包含多个输入元素，这些元素都需要被包含在FormGroup中。
在我们的反应式表单中，我们经常需要使用嵌套表单的形式来组织这些FormGroup和FormControl。在这种情况下，我们可以使用ng-nested-control指令来实现嵌套表单。
<div *ngIf="showChildForm">
<div ng-nested-control formGroupName="childForm">
<input formControlName="firstName" placeholder="First Name">
<input formControlName="lastName" placeholder="Last Name">
</div>
</div>在上面的示例代码中，我们使用了*ngIf语句来创建一个包含嵌套表单的元素。在该DIV中的输入元素被包含在一个FormGroup中，这个FormGroup的名称为“childForm”，并通过使用formGroupName绑定到了ng-nested-control指令上。
例子
为了更好地理解@webdev-tools/ng-nested-reactive-forms是如何工作的，我们来看一个例子。在这个例子中，我们将创建一个嵌套反应式表单，其中包含基本的联系人信息和家庭成员信息。
首先，我们需要导入@webdev-tools/ng-nested-reactive-forms和Angular的ReactiveFormsModule：
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NestedReactiveFormsModule } from '@webdev-tools/ng-nested-reactive-forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';接下来，我们可以定义一个组件，创建我们的反应式表单并绑定到ngForm上下文中：
-- -------------------- ---- -------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
------------ ----------
------------- - ------
------------------- ------------ ------------ - -
---------- -
---------------- - ------------------------
---------- ---- ---------------------
--------- -----
------------- ---- --------------------- -------------------
------------ -----
-------- ------------------------
------- -----
----- -----
------ -----
---- ----
---
-------------- ------------------------
----------------------------------
--
---
-
--- --------------- -
------ ------------------------------------- -- ----------
-
------------------------------ --------- -
------ ------------------------
---------- ---- ---------------------
--------- -----
------------- ---- --------------------- -------------------
------------ ----
---
-
----------------- -
----- ------------- - ------------------------------------- -- ----------
-------------------------------------------------------
-
---------- -
------------------ - -----
-
-在上面的代码中，我们创建了一个FormGroup实例，用于表示联系人的整个表单，并使用this.formBuilder创建了具有嵌套结构的联系人信息和家庭成员信息。
我们还定义了两个辅助方法：createFamilyMemberFormGroup()和addFamilyMember()。createFamilyMemberFormGroup()用于创建一个新的FormGroup，用于表示家庭成员信息。addFamilyMember()方法将此新的FormGroup添加到名为“familyMembers”的FormGroup数组中。
最后，我们在showForm()方法中将showChildForm变量设置为“true”，以显示表单的家庭成员部分。
现在，我们可以在HTML模版中添加代码，以使用@webdev-tools/ng-nested-reactive-forms指令创建嵌套的表单：
-- -------------------- ---- -------
----- --------------------------
---- ------------------ ----------------- ------------------------
-----------------------
------ ----------- -------------------- -------------------------
------ ----------- -------------------- -----------------------
------ ----------- -------------------- ------------------------
------ ----------- -------------------- ----------------------
------
---- ----------------- ------------------------------
---- ----------- ------ -- ----------------------- --- - - --------
---- --------------------
---------- ------ ---- - --------
---- -------------------
------------ -------------
------ ----------- -------------------- ----------------------------
------
---- -------------------
----------- -------------
------ ----------- -------------------- ---------------------------
------
---- -------------------
---------------------
------ ----------- -------------------- -------------------------------
------
---- -------------------
---------------------
------ ----------- -------------------- ------------------------------
------
------
------
---- -------------------
------- ------------- ---------- ------------ ------------------------------- ------ ---------------
------
------
------- ------------- ---------- ------------ -----------------------------------------------
-------在上面的代码中，我们使用ng-nested-control指令包含位于FormGroup中的每个输入元素，以便正确处理表单数据。我们还使用了*ngFor循环来处理多个家庭成员。在这种情况下，我们使用了每个家庭成员的索引来绑定到formGroupName指令。
最后，我们添加了一个Add Family Member按钮，可以允许用户通过调用addFamilyMember()方法来向表单中添加另一个家庭成员。
结论
在本文中，我们介绍了@webdev-tools/ng-nested-reactive-forms npm包，并用具体的示例代码展示了如何使用它来构建嵌套反应式表单。我们看到了如何创建Angular模块和组件，如何使用模板来呈现表单，以及如何使用指令和控件和从模板和组件中访问数据。我们希望这篇文章对您有所帮助，使您能够更好地理解嵌套反应式表单，并在您的下一个Web应用程序中应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5d51ab1864dac67100