FormGroup在FormArray中无法正常工作，附Person与Name类代码求助

Hey there! Let's work through that FormGroup-in-FormArray problem you're hitting. First, let's spot a couple of small issues in your model classes that might be causing confusion, then dive into getting the Angular forms set up correctly.

Step 1: Fix Minor Issues in Your Model Classes #

First, there are a couple of typos and odd initializations in your Person class that we should clean up:

• The public string: gender; line is invalid syntax — it should be public gender?: string;
• Initializing childList with [{}] will create an empty Person object by default, which is probably not what you want; better to use an empty array []
• We'll also update the constructors to properly instantiate nested Name and Person instances instead of just plain objects

Here's the corrected code:

// Person class (corrected)
export class Person {
  public name: Name;
  public childList: Person[];
  public gender?: string; // Fixed syntax and type

  constructor(person?: Partial<Person>) {
    person = person || {};
    this.name = person.name ? new Name(person.name) : new Name();
    this.gender = person.gender || undefined;
    this.childList = person.childList?.map(child => new Person(child)) || []; // Properly map child instances
  }
}

// Name class (minor tweak for consistency)
export class Name {
  public firstName?: string;
  public lastName?: string;

  constructor(name?: Partial<Name>) {
    name = name || {};
    this.firstName = name.firstName || undefined;
    this.lastName = name.lastName || undefined;
  }
}

Step 2: Create Form Group Factories #

To map your model to Angular forms, you'll need helper functions to generate FormGroup instances for both Name and Person. This ensures nested controls are properly set up and linked to your model structure.

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

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

// Factory for Name FormGroup
private createNameFormGroup(name?: Name): FormGroup {
  return this.fb.group({
    firstName: [name?.firstName || ''],
    lastName: [name?.lastName || '']
  });
}

// Factory for Person FormGroup (includes nested Name and childList FormArray)
private createPersonFormGroup(person?: Person): FormGroup {
  return this.fb.group({
    name: this.createNameFormGroup(person?.name),
    gender: [person?.gender || ''],
    childList: this.fb.array(
      person?.childList?.map(child => this.createPersonFormGroup(child)) || []
    )
  });
}

Step 3: Initialize the Parent Form #

Now set up your main form with a FormArray that holds your Person form groups. We'll also add helper methods to get the FormArray and add new Person entries.

public peopleForm = this.fb.group({
  people: this.fb.array([
    this.createPersonFormGroup() // Add an initial empty Person form
  ])
});

// Helper to access the people FormArray easily
get peopleArray(): FormArray {
  return this.peopleForm.get('people') as FormArray;
}

// Add a new empty Person to the FormArray
addNewPerson(): void {
  this.peopleArray.push(this.createPersonFormGroup());
}

// Add a new child Person to a specific parent Person's childList
addNewChild(parentIndex: number): void {
  const parentGroup = this.peopleArray.at(parentIndex) as FormGroup;
  const childArray = parentGroup.get('childList') as FormArray;
  childArray.push(this.createPersonFormGroup());
}

Step 4: Bind the Form in Your Template #

Make sure your template correctly references the nested FormGroup and FormArray controls. Here's a working example:

<form [formGroup]="peopleForm">
  <div formArrayName="people">
    <!-- Loop through each Person in the main FormArray -->
    <div *ngFor="let person of peopleArray.controls; let i = index" [formGroupName]="i">
      <h3>Person {{ i + 1 }}</h3>
      
      <!-- Nested Name FormGroup -->
      <div formGroupName="name">
        <label>First Name:</label>
        <input formControlName="firstName" type="text" placeholder="First name">
        
        <label>Last Name:</label>
        <input formControlName="lastName" type="text" placeholder="Last name">
      </div>
      
      <!-- Gender Control -->
      <label>Gender:</label>
      <input formControlName="gender" type="text" placeholder="Gender">
      
      <!-- Child List FormArray -->
      <div formArrayName="childList" style="margin-top: 1rem;">
        <h4>Children</h4>
        <div *ngFor="let child of person.get('childList')['controls']; let j = index" [formGroupName]="j">
          <div formGroupName="name">
            <label>Child {{ j + 1 }} First Name:</label>
            <input formControlName="firstName" type="text" placeholder="Child first name">
          </div>
          <label>Child Gender:</label>
          <input formControlName="gender" type="text" placeholder="Child gender">
        </div>
        <button (click)="addNewChild(i)" style="margin-top: 0.5rem;">Add Child</button>
      </div>
      
      <hr style="margin: 2rem 0;">
    </div>
  </div>
  <button (click)="addNewPerson()">Add New Person</button>
</form>

Key Fixes Explained #

• Proper Model Initialization: We now correctly instantiate Name and nested Person objects in the constructor, so your model structure aligns with the form data flow.
• Form Factory Functions: These ensure every nested FormGroup (for Name and child Persons) is properly structured, which is critical for Angular forms to recognize and sync nested controls.
• Clear Template Binding: Using formArrayName, formGroupName, and formControlName correctly tells Angular how to map DOM elements to your form structure, eliminating missing control errors.

If you were seeing issues like controls not updating, form values not reflecting model data, or console errors about missing form controls, these steps should resolve those problems.

内容的提问来源于stack exchange，提问作者Asaduzzaman Noor