Angular 2 使用 FormBuilder 访问嵌套 FormArray

typescript

在Angular 2中，使用FormBuilder可以方便地处理表单数据。在某些情况下，我们可能需要访问嵌套的FormArray，以便更好地处理表单数据的结构。本文将介绍如何使用FormBuilder来访问嵌套的FormArray，并提供一个案例代码来说明。

什么是FormBuilder?

在Angular 2中，FormBuilder是一个用于创建表单模型的工具，它提供了一种简洁的方式来定义和处理表单。通过使用FormBuilder，我们可以轻松地构建和操作复杂的表单结构。

FormArray的用途

FormArray是Angular中的一个类，用于管理表单中一组动态的表单控件。它可以用于处理重复的表单字段，例如多个输入框或复选框。通过使用FormArray，我们可以方便地处理可变长度的表单数据。

访问嵌套的FormArray

假设我们有一个表单，其中包含一个嵌套的FormArray，用于表示用户的兴趣爱好。每个兴趣爱好都有一个名称和一个是否选中的状态。我们可以使用FormBuilder来创建这个表单模型，并通过FormArray来管理兴趣爱好的列表。

在组件中，我们首先需要导入FormBuilder和FormGroup类：

typescript
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

然后，在组件类中定义一个表单模型：

typescript
interestsForm: FormGroup;

接下来，在组件的构造函数中使用FormBuilder来创建表单模型：

typescript
constructor(private formBuilder: FormBuilder) {
  this.interestsForm = this.formBuilder.group({
    interests: this.formBuilder.array([])
  });
}

在这个例子中，我们使用formBuilder.group方法创建了一个FormGroup实例，并在其中定义了一个名为"interests"的FormArray。

接下来，我们需要在模板中使用FormArray的内建方法来访问和操作它。在ngOnInit生命周期钩子函数中，我们可以使用FormArray的controls属性来获取表单控件的列表。

typescript
ngOnInit() {
  const interests = this.interestsForm.get('interests') as FormArray;
  console.log(interests.controls);
}

在这个例子中，我们使用get方法获取了名为"interests"的FormArray，并将其转换为类型为FormArray的变量interests。然后，我们可以使用interests.controls来访问兴趣爱好的列表。

案例代码

下面是一个完整的案例代码，演示了如何使用FormBuilder访问嵌套的FormArray：

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-interests-form',
  template: <code>
    <form [formGroup]="interestsForm">
      <div formArrayName="interests">
        <div *ngFor="let interest of interests.controls; let i=index">
          <input type="text" [formControlName]="i">
        </div>
      </div>
    </form>
  </code>,
})
export class InterestsFormComponent implements OnInit {
  interestsForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.interestsForm = this.formBuilder.group({
      interests: this.formBuilder.array([])
    });
  }
  ngOnInit() {
    const interests = this.interestsForm.get('interests') as FormArray;
    console.log(interests.controls);
  }
}

在这个案例中，我们创建了一个包含多个输入框的表单，用于输入用户的兴趣爱好。每个输入框通过formControlName绑定到FormArray的索引。在ngOnInit中，我们使用FormArray的controls属性来输出表单控件的列表。

通过使用FormBuilder，我们可以轻松地创建和处理复杂的表单结构。当需要访问嵌套的FormArray时，我们可以使用FormArray的内建方法来获取表单控件的列表。这使得处理可变长度的表单数据变得更加简单和高效。

参考资料：

- Angular官方文档：https://angular.io/guide/reactive-forms

- Angular官方文档：https://angular.io/api/forms/FormBuilder

- Angular官方文档：https://angular.io/api/forms/FormArray