angular - Error: cannot read property 'controls' of null (formArray inside FormGroup inside FormArray inside FormGroup)

Question

I have a form to add projects and repos for those projects. When adding a repo, you enter a POM URL. I am having trouble with accessing the POM URLs and it is preventing the form from loading.

I get the error "Cannot read property 'controls' of null

(The code is on another computer, so I'll recreate it the best I can)

TS

this.addProject = new FormGroup({
  ...
  repos: new FormArray([
    new FormGroup({
      ...
      pomUrls: new FormArray([new FormControl()])
    })
  ])
});

addRepo(): void {
  this.addRepos.push(new FormGroup({
    ...
    pomUrls: new FormArray([new FormControl()])
  }));
}

get addRepos(): FormArray {
  return this.addProject.get('repos') as FormArray;
}

get pomUrls() {
  return this.addRepos.get('pomUrls') as FormArray;
}

addPomUrls() {
  const control = new FormControl();
  this.pomUrls.push(control);

removePomUrl(index: number): void {
  this.pomUrls.removeAt(index);
}

HTML

<ng-container formArrayName="pomUrls">
  <div *ngFor="let _ of pomUrls.controls; index as i; count as c;">
    <las-ux-textfield [label]="'POM URLs'" [formControlName]="i"></las-ux-textfield>
    <div clss="button-container">
      <las-ux-button [id]="'addPom' + i" ... (click)="addPomUrls()"> </las-ux-button>
      <las-ux-button *ngIf="c > 1" [id]="'removePom' + i" ... (click)="removePomUrl(i)"> </las-ux-button>
    </div>
  </div>
</ng-container>

So as-is, this gives me the "cannot read property 'controls' of null" error

If I change get pomUrls to the following --

get pomUrls() {
  return this.addRepos.at(0).get('pomUrls') as FormArray;

-- then it works perfectly...at least for retrieving at index 0. With this, I can add multiple pomUrls for a single repo, or add multiple repos with a single pomUrl.

BUT I can't add multiple repos with multiple pomUrls. Then it gives me an error "cannot find control with path: 'repos -> 1 -> pomUrls -> 1'". So it can't go beyond index 0, which makes sense.

My question is WHY I can't get this to work? Why does addRepos.at(0).get('pomUrls') work but addRepos.get('pomUrls') doesn't?

This is my first big project with Angular and I've been stuck on this for a week. I have been searching for help, wording this every way I can think of, and read through a lot of articles and other questions here on stackoverflow, but no luck.

Any help is greatly appreciated!

question from:https://stackoverflow.com/questions/65853503/error-cannot-read-property-controls-of-null-formarray-inside-formgroup-insid

Answer 1

Please add ? to pomUrls?.controls in your template html.

pomUrls is undefined at some point in runtime.

?. is a null safety operator