Angular表单数组中FormGroup对象显示[object Object]问题求助

Ah, I see exactly what's going wrong here! You're treating left and right as single FormControls that hold objects, but Angular needs them to be FormGroups if you want to bind to their nested label properties. Let me walk you through fixing this step by step:

Step 1: Update Your Form Structure in component.ts #

You need to restructure how you create the left and right parts of your form—each should be its own FormGroup with a label FormControl inside. Here's the revised code:

export class LinksEditorComponent implements OnInit {
  @Input() exercise;
  exerciseForm: FormGroup;
  get pairs(): FormArray {
    return this.exerciseForm.get('pairs') as FormArray;
  }
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    if (!this.exercise.title || !this.exercise.desc || !this.exercise.pairs) {
      this.exercise = { title: '', desc: '', pairs: [] };
    }
    this.initExerciseForm();
  }
  initExerciseForm() {
    this.exerciseForm = this.formBuilder.group({
      title: [this.exercise.title, Validators.required],
      desc: [this.exercise.desc, Validators.required],
      pairs: this.formBuilder.array(
        this.exercise.pairs.map(pair => this.createPair(pair)),
        Validators.required
      )
    });
  }
  // Updated: left/right are now FormGroups with a label control
  createPair(pair: any): FormGroup {
    return this.formBuilder.group({
      left: this.formBuilder.group({
        label: [pair.left.label, Validators.required]
      }),
      right: this.formBuilder.group({
        label: [pair.right.label, Validators.required]
      })
    });
  }
  // Updated to match the new FormGroup structure
  onAddPair() {
    this.pairs.push(
      this.formBuilder.group({
        left: this.formBuilder.group({
          label: ['', Validators.required]
        }),
        right: this.formBuilder.group({
          label: ['', Validators.required]
        })
      })
    );
  }
}

Step 2: Adjust the Template in component.html #

Now that left and right are FormGroups, you need to use formGroupName to access their nested label controls. Here's the fixed template:

<mat-card class="links-editor" *ngIf="exercise">
  <form fxLayout="column" fxLayoutAlign="space-between center" [formGroup]="exerciseForm" (ngSubmit)="onSubmit()" fxLayout="column" >
    <mat-form-field appearance="standard">
      <mat-label>Title</mat-label>
      <input matInput formControlName="title" />
    </mat-form-field>
    <mat-form-field appearance="standard">
      <mat-label>Description</mat-label>
      <input matInput formControlName="desc" />
    </mat-form-field>
    <mat-list formArrayName="pairs">
      <div *ngFor="let pairControl of pairs.controls; let i = index">
        <div [formGroupName]="i">
          <!-- Wrap left in formGroupName to access its label control -->
          <div formGroupName="left">
            <mat-form-field appearance="standard">
              <mat-label>Left chip</mat-label>
              <input matInput formControlName="label" />
            </mat-form-field>
          </div>
          <!-- Same for right -->
          <div formGroupName="right">
            <mat-form-field appearance="standard">
              <mat-label>Right chip</mat-label>
              <input matInput formControlName="label" />
            </mat-form-field>
          </div>
        </div>
      </div>
      <button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
        <mat-icon>add</mat-icon>
      </button>
    </mat-list>
    <button type="submit" mat-fab color="accent" [disabled]="exerciseForm.invalid">
      <mat-icon>done</mat-icon>
    </button>
  </form>
</mat-card>

Why This Fixes Your Issue #

• Before, you were storing an object ({ label: ... }) directly in a FormControl. When you bound that control to an input, Angular tried to convert the object to a string—hence the [object Object] display.
• By making left and right FormGroups, you're telling Angular to treat them as nested form structures. This lets you bind directly to their label properties using formControlName="label" inside a formGroupName container, which resolves your editing and display problems.

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