Angular技术问题：如何向FormGroup中添加FormArray？

Hey there! I totally get how tricky FormArray and FormGroup interactions can be in Angular—let's work through this together.

From what you described, the problem comes down to how you're setting up your FormArray within the rate FormGroup and how you're binding it in your template. Here's a step-by-step breakdown to fix it:

1. Correctly Define the FormArray in Your Component #

First, make sure you're initializing your rate FormGroup with a proper FormArray. Let's say your rating items have fields like score and comment—here's how to set it up using the FormBuilder:

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

// Inside your component class
constructor(private fb: FormBuilder) {}

myForm: FormGroup;

ngOnInit() {
  this.myForm = this.fb.group({
    // Add your other form fields here
    rate: this.fb.group({
      // Declare your FormArray inside the rate group
      ratings: this.fb.array([])
    })
  });
}

// Create a getter to easily access the FormArray (super helpful for templates!)
get ratingsArray(): FormArray {
  return this.myForm.get('rate.ratings') as FormArray;
}

2. Add a Method to Push New Items to the FormArray #

Next, create a method to add new FormGroups to your FormArray. This ensures each new rating item is a properly structured form group:

addNewRating() {
  // Create a new form group for a rating entry
  const ratingGroup = this.fb.group({
    score: ['', /* add validators if needed */],
    comment: ['']
  });

  // Push it to the FormArray
  this.ratingsArray.push(ratingGroup);
}

3. Fix Template Binding (The Most Common Pitfall!) #

This is where most people run into issues with formControlName. You need to properly nest formArrayName and formGroupName in your template to link the controls correctly:

<form [formGroup]="myForm">
  <!-- Wrap the rate group -->
  <div formGroupName="rate">
    <!-- Bind the FormArray -->
    <div formArrayName="ratings">
      <!-- Loop through each control in the FormArray -->
      <div *ngFor="let rating of ratingsArray.controls; let i = index" [formGroupName]="i">
        <!-- Now you can use formControlName for individual fields -->
        <input type="number" formControlName="score" placeholder="Enter score">
        <textarea formControlName="comment" placeholder="Add comment"></textarea>
      </div>
    </div>
    <!-- Button to add new ratings -->
    <button (click)="addNewRating()">Add Rating</button>
  </div>
</form>

Key Mistakes to Avoid #

• Forgetting formArrayName: You must specify formArrayName="ratings" on the parent element of your loop to tell Angular which FormArray you're targeting.
• Incorrect formGroupName Binding: Using [formGroupName]="i" (with the index) links each looped item to the corresponding FormGroup in the FormArray.
• Not Using a Getter: Directly accessing this.myForm.get('rate.ratings') in the template can lead to type issues—using a getter like ratingsArray makes it cleaner and safer.

If you were missing any of these pieces, adding them should resolve the formControlName error you're seeing.

内容的提问来源于stack exchange，提问作者Jesús Silva