如何引用FormArray单个控件？响应式表单数组formControlName配置问题

Let's break down what's causing your empty array issue and fix it to support the simple value array structure you want, plus scalable multi-array support.

Key Issue in Your Original Code #

The main problem is that you're treating each element in your reps FormArray as a FormGroup (using [formGroupName]="j"), but you're actually adding FormControls to it. This mismatch breaks the form binding, resulting in empty arrays even after adding controls.

Corrected Implementation #

Component Code #

First, let's clean up the form structure and add helper functions for better scalability:

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

@Component({
  selector: 'app-multiplier-form',
  templateUrl: './multiplier-form.component.html'
})
export class MultiplierFormComponent {
  multiplerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // Initialize with a reps array pre-populated with [1,2,3]
    this.multiplerForm = this.fb.group({
      multipliers: this.fb.array([
        this.fb.group({
          reps: this.fb.array([
            this.fb.control(1),
            this.fb.control(2),
            this.fb.control(3)
          ])
        })
      ])
    });
  }

  // Helper getter for easy access to the multipliers array
  get multipliers(): FormArray {
    return this.multiplerForm.get('multipliers') as FormArray;
  }

  // Get the reps array for a specific multiplier group
  getReps(multiplier: FormGroup): FormArray {
    return multiplier.get('reps') as FormArray;
  }

  // Add a new rep to a specific multiplier's reps array
  addReps(multiplier: FormGroup): void {
    this.getReps(multiplier).push(this.fb.control(''));
  }

  // Remove a rep from a specific multiplier's reps array
  removeReps(multiplier: FormGroup, index: number): void {
    this.getReps(multiplier).removeAt(index);
  }

  // Add a new multiplier group (for multi-array support)
  addMultiplier(): void {
    this.multipliers.push(
      this.fb.group({
        reps: this.fb.array([this.fb.control('')])
      })
    );
  }

  // Remove a multiplier group
  removeMultiplier(index: number): void {
    this.multipliers.removeAt(index);
  }
}

Template Code #

Now fix the template to properly bind to FormControls instead of non-existent FormGroups:

<form [formGroup]="multiplerForm">
  <!-- Outer array for multiple multiplier groups -->
  <div formArrayName="multipliers">
    <div *ngFor="let multiplier of multipliers.controls; let i=index" [formGroupName]="i">
      <h4>Multiplier Set {{i+1}}</h4>
      
      <!-- Reps array section -->
      <StackLayout formArrayName="reps">
        <GridLayout rows="*" columns="*,*,*" *ngFor="let rep of getReps(multiplier).controls; let j=index">
          <Label col="0" text="Set {{j+1}}"></Label>
          <!-- Bind directly to the FormControl using its index -->
          <TextField col="1" [formControlName]="j"></TextField>
          <Button col="2" text="X" (tap)="removeReps(multiplier, j)"></Button>
        </GridLayout>
        
        <Button text="Add New Rep" (tap)="addReps(multiplier)"></Button>
      </StackLayout>
      
      <Button text="Remove Multiplier Set" (tap)="removeMultiplier(i)"></Button>
    </div>
    
    <Button text="Add New Multiplier Set" (tap)="addMultiplier()"></Button>
  </div>
</form>

<!-- Optional: View form value to verify -->
<pre>{{ multiplerForm.value | json }}</pre>

What Changed & Why #

1. Removed [formGroupName]="j": Since each element in reps is a simple FormControl (not a FormGroup), this directive was creating an invalid nested context that broke value binding.
2. Added Helper Getters: multipliers and getReps make accessing nested form arrays cleaner and less error-prone, especially for large forms.
3. Scoped Add/Remove Functions: Functions now target specific multiplier groups, making it easy to support multiple independent reps arrays.
4. Proper Initialization: The reps array starts with [1,2,3] as requested, and new controls are added as empty FormControls ready for user input.

Verification #

After implementing this, you'll see:

• The initial form loads with reps values [1,2,3]
• Adding/removing reps updates the array in real-time
• Multiple multiplier sets can be added, each with their own independent reps array
• The form value (shown in the pre tag) will reflect all changes correctly

内容的提问来源于stack exchange，提问作者Darian van der Merwe