在Reactive Forms中检索FormArray中的项目信息

在Reactive Forms中，可以使用FormArray来管理动态的表单控件集合。FormArray是一个由FormControl或FormGroup组成的数组，用于表示一组重复的表单控件。

要检索FormArray中的项目信息，可以使用FormArray的controls属性。该属性返回一个对象，其中包含FormArray中每个控件的信息。可以通过遍历这个对象来获取每个控件的值、状态等信息。

以下是一个示例代码，演示如何检索FormArray中的项目信息：

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <input [formControlName]="i" placeholder="Item {{ i + 1 }}">
        </div>
      </div>
    </form>
    <button (click)="retrieveItems()">Retrieve Items</button>
  `,
})
export class FormComponent {
  myForm: FormGroup;

  get items() {
    return this.myForm.get('items') as FormArray;
  }

  constructor() {
    this.myForm = new FormGroup({
      items: new FormArray([
        new FormControl('Item 1'),
        new FormControl('Item 2'),
        new FormControl('Item 3'),
      ]),
    });
  }

  retrieveItems() {
    const itemValues = this.items.controls.map(control => control.value);
    console.log(itemValues);
  }
}

在上述示例中，我们创建了一个包含FormArray的表单，并使用ngFor指令动态生成多个输入框。通过调用retrieveItems方法，我们可以获取FormArray中每个控件的值，并将其打印到控制台。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。在实际应用中，你可以根据FormArray中的项目信息执行各种操作，例如添加、删除、更新等。

腾讯云相关产品和产品介绍链接地址：