Angular FormArray: Cannot read property 'push' of undefined

Question

I have a form spread across 3 subcomponents. There are 3 form groups. In the 3rd group is a FormArray. This form will hold FormControls that are simply true/false. One for each result returned from an API call. This worked just fine when this form was its own separate thing completely from the main form. Trying to integrate it into a single form with groups has caused the following error:

Cannot read property 'push' of undefined

Changing how it tries to push to the form array yields a "Push does not exist on type AbstractControl" error. Here is the .ts code:

public wizard = this.fb.group({
  decisionMaker: this.fb.group({}),
  schedule: this.fb.group({}),
  step2: this.fb.group({
    amount: [0, Validators.required],
    step2DataArray: new FormArray([]),
  }),
});

public get step2DataArray(): AbstractControl[] {
  return (this.wizard.get('step2DataArray') as FormArray).controls;
}

private populateFormArray(): void {
  console.log(this.wizard);
  this.step2DataBehavior.getValue().forEach(() => {
    const control = new FormControl(false);
    (this.wizard.controls.step2DataArray as FormArray).push(control);
  });
}

relevant html

 <ng-container [formGroup]="controlContainer.control" class="px-3 py-3">
    <table mat-table [dataSource]="step2DataBehavior | async" class="w-100 mat-elevation-z8">
    <ng-container matColumnDef="inputs">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index" formArrayName="step2DataArray">
        <mat-checkbox formControlName="step2DataArray[i]" [value]="element.amount"></mat-checkbox>
      </mat-cell>
    </ng-container>
  </table>
</ng-container>

I know I'm either referencing the part of the form wrong to do the push, or the public get that sets them as abstract controls are wrong somehow. Any advice? I can't find anything in the docs specifically about this and other answers to this question haven't worked outright.

I suggest control the inputs in a mat table using formControl, see, e.g. stackoverflow.com/questions/56566003/… and stackoverflow.com/questions/59223972/… — Eliseo
– Eliseo, Commented Feb 7, 2020 at 8:27

Christopher Peisert · Accepted Answer · 2020-02-07 03:42:51Z

1

Since the FormArray step2DataArray is nested within an inner FormGroup (step2), you need to specify the full path to the array.

public get step2DataArray(): AbstractControl[] {
  return (this.wizard.get(['step2', 'step2DataArray']) as FormArray).controls;
}

answered Feb 7, 2020 at 3:42

Christopher Peisert

24.5k4 gold badges102 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mycroft16 Over a year ago

I knew it was something like that. I was trying to access it from the object like this.wizard.controls.step2.get('step2DataArray') and every variation errored. In my searches I didn't see that this was done as an array of the formGroup layers to the control).

Collectives™ on Stack Overflow

Angular FormArray: Cannot read property 'push' of undefined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related