Angular2：在 FormArray 的索引 1 处找不到表单控件

typescript

使用 Angular2 创建表单时，我们经常会遇到一些问题。其中一个常见的问题是在 FormArray 的索引 1 处找不到表单控件。在本文中，我们将探讨这个问题并提供解决方案。

在 Angular2 中，FormArray 是一个表单控件，用于处理动态生成的表单数组。它允许我们动态地添加和删除表单控件，并对其进行验证。然而，有时候当我们尝试在 FormArray 的索引 1 处找到表单控件时，会遇到一个错误，提示无法找到该控件。

问题分析

在 Angular2 的表单中，每个表单控件都有一个唯一的索引。这个索引用于标识表单控件，并且在访问和操作表单控件时非常重要。当我们使用 FormArray 控件时，我们可以通过索引来访问其中的表单控件。

然而，在某些情况下，当我们尝试在 FormArray 的索引 1 处找到表单控件时，会出现找不到的错误。这通常是因为我们在访问表单控件之前没有正确初始化 FormArray。如果没有正确初始化 FormArray，那么在索引 1 处是没有表单控件的，因此会报错。

解决方案

要解决这个问题，我们需要确保正确初始化 FormArray。我们可以通过在组件的构造函数中创建一个新的 FormArray 实例来实现这一点。例如：

typescript
import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.CSS']
})
export class FormComponent implements OnInit {
  form: FormGroup;
  constructor() { }
  ngOnInit() {
    this.form = new FormGroup({
      array: new FormArray([
        new FormControl(''),
        new FormControl('')
      ])
    });
  }
  get arrayControls() {
    return (this.form.get('array') as FormArray).controls;
  }
}

在上面的代码中，我们创建了一个名为 form 的 FormGroup，并在其中创建了一个名为 array 的 FormArray。在构造函数中，我们初始化了这个 FormArray，并为其添加了两个 FormControl。

在模板中，我们可以通过调用 arrayControls 函数来获取 FormArray 的所有控件。这样，我们就可以在模板中访问和操作这些控件了。

案例代码

在模板中，我们可以使用 ngFor 指令来遍历 arrayControls，并使用索引来访问每个表单控件。例如：

html
<div [formGroup]="form">
  <div formArrayName="array">
    <div *ngFor="let control of arrayControls; let i = index">
      <input [formControlName]="i" type="text">
    </div>
  </div>
</div>

在上面的代码中，我们使用 ngFor 指令来遍历 arrayControls，并为每个表单控件创建一个输入框。我们使用索引 i 来设置每个输入框的 formControlName。

通过这样的设置，我们就可以正确地访问和操作 FormArray 的表单控件了。

在本文中，我们探讨了在 Angular2 中使用 FormArray 时遇到的问题，并提供了解决方案。我们了解到，当我们尝试在 FormArray 的索引 1 处找到表单控件时，会报错找不到控件。为了解决这个问题，我们需要确保正确初始化 FormArray，并使用正确的索引来访问和操作表单控件。通过正确的设置，我们可以顺利地使用 FormArray 来处理动态生成的表单数组。