Angular 2：从 FormArray 访问数据

ABS

Angular 2：从 FormArray 访问数据

在Angular 2中，FormArray是用于处理动态表单中重复的控件集合的一种方式。它允许我们在表单中添加、删除或修改多个控件的值。但是，当我们需要访问FormArray中的数据时，可能会遇到一些困难。在本文中，我们将学习如何从FormArray中访问数据，并且通过一个案例代码来演示。

什么是FormArray？

FormArray是Angular中的一个类，用于表示表单中的一组重复控件。它继承自ABStractControl类，因此它具有与其他表单控件相似的特性和方法。FormArray可以包含FormGroup或FormControl实例，这取决于我们的需求。

案例代码

让我们通过一个简单的案例来理解如何从FormArray中访问数据。假设我们有一个表单，用于接收用户的联系信息，包括姓名、邮箱和电话号码。由于我们不知道用户会输入多少联系人信息，因此我们使用FormArray来处理重复的控件集合。

首先，我们需要在组件中创建一个FormArray实例，并将其与表单相关联。我们可以使用FormBuilder来实现这一点。

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.CSS']
})
export class ContactFormComponent {
  contactForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      contacts: this.fb.array([])
    });
  }
  
  get contacts() {
    return this.contactForm.get('contacts') as FormArray;
  }
}

在上面的代码中，我们创建了一个名为contactForm的FormGroup实例，并在其中创建了一个名为contacts的FormArray实例。通过使用this.fb.array([])来初始化FormArray，我们确保了contacts是一个空数组。

接下来，我们需要在HTML模板中动态地添加和删除联系人信息。我们可以使用FormArray的push和removeAt方法来实现这一点。

html
<form [formGroup]="contactForm">
  <div formArrayName="contacts">
    <div *ngFor="let contact of contacts.controls; let i = index" [formGroupName]="i">
      <input formControlName="name" placeholder="Name">
      <input formControlName="emAIl" placeholder="EmAIl">
      <input formControlName="phone" placeholder="Phone">
      <button (click)="removeContact(i)">Remove</button>
    </div>
  </div>
  <button (click)="addContact()">Add Contact</button>
</form>

在上面的代码中，我们使用FormArray的controls属性来迭代联系人信息，并使用formGroupName将每个联系人信息与相应的FormGroup关联起来。通过使用formControlName，我们可以将每个输入字段与FormGroup中的相应FormControl关联起来。

现在，我们已经成功地创建了一个动态表单，并且可以添加和删除联系人信息。接下来，让我们学习如何从FormArray中访问数据。

从FormArray中访问数据

要从FormArray中访问数据，我们可以使用FormArray的value属性。value属性返回一个包含FormArray中所有控件的值的对象。我们可以通过索引来访问每个联系人信息的值。

typescript
getcontactData(index: number) {
  const contact = this.contacts.at(index).value;
  console.log(contact);
}

在上面的代码中，我们使用FormArray的at方法来获取指定索引位置的FormGroup，然后使用value属性来获取该FormGroup中所有控件的值。我们可以将这些值用于进一步的处理，如打印到控制台或发送到服务器。

FormArray是Angular中处理动态表单中重复控件集合的一种方式。虽然访问FormArray中的数据可能会有些困难，但我们可以使用value属性轻松地获取它们。通过本文中的案例代码，我们学习了如何创建一个动态表单，并从FormArray中访问数据。希望这对你理解Angular中的FormArray有所帮助！