Angular2报错：FormArray无法找到索引1的表单控件问题咨询

Hey there! Let's figure out why your FormArray is only picking up the first record and throwing that frustrating error.

🔍 What's Causing This Error? #

The Cannot find form control at index 1 message means your FormArray only has one form control initialized, but you're trying to bind to the second item (index 1) in your JSON array. The core issue is a mismatch: your FormArray's length doesn't match the number of records in your JSON data—so when Angular looks for the control at index 1, it doesn't exist.

🛠️ Step-by-Step Fixes #

1. Initialize FormArray to Match Your JSON Array Length

First, make sure you're creating a form control for every item in your JSON array when setting up the form. Don't hardcode just one control!

Let's assume your JSON looks like this (adjust to match your actual data):

{
  "title": "Project X",
  "tasks": [
    {"description": "Setup environment"},
    {"description": "Write core logic"},
    {"description": "Test functionality"}
  ]
}

In your component TypeScript, use FormBuilder to map over the JSON array and generate controls for each item:

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

@Component({
  // Your component metadata here
})
export class YourComponent {
  projectForm: FormGroup;
  jsonData = { /* Your actual JSON object */ };

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.projectForm = this.fb.group({
      title: [this.jsonData.title], // Works fine since it's a single FormControl
      tasks: this.fb.array(
        // Create a FormControl for every task in the JSON array
        this.jsonData.tasks.map(task => this.fb.control(task.description))
      )
    });
  }

  // Getter to easily access the FormArray in your template
  get tasksArray(): FormArray {
    return this.projectForm.get('tasks') as FormArray;
  }
}

2. Fix the Template Binding

Next, make sure your HTML template correctly binds to the FormArray's controls. Avoid hardcoding indexes or mismatching loops.

❌ Wrong (causes the error):

<div formArrayName="tasks">
  <!-- Hardcoded first control, then trying to bind to index 1 which doesn't exist -->
  <input [formControlName]="0" />
  <div *ngFor="let task of jsonData.tasks; let i = index" *ngIf="i > 0">
    <input [formControlName]="i" />
  </div>
</div>

✅ Correct (loop through the FormArray's controls):

<form [formGroup]="projectForm">
  <!-- Your working FormControl -->
  <input formControlName="title" placeholder="Project Title" />

  <!-- FormArray binding -->
  <div formArrayName="tasks">
    <h3>Tasks</h3>
    <!-- Loop through the FormArray's controls to ensure index matches existing controls -->
    <div *ngFor="let taskCtrl of tasksArray.controls; let i = index">
      <input [formControlName]="i" placeholder="Task {{i+1}}" />
    </div>
  </div>
</form>

Alternatively, if you prefer looping through your JSON array, just ensure the FormArray length matches first:

<div formArrayName="tasks">
  <div *ngFor="let task of jsonData.tasks; let i = index">
    <input [formControlName]="i" placeholder="Task {{i+1}}" />
  </div>
</div>

📝 Bonus: Dynamic Updates #

If you ever add/remove items from your JSON array later, remember to sync the FormArray too:

• Add an item: this.tasksArray.push(this.fb.control('New Task'))
• Remove an item: this.tasksArray.removeAt(index)

This keeps the FormArray's length in sync with your data, so you won't hit missing control errors again!

内容的提问来源于stack exchange，提问作者Ghanshyam Dhanore