Nested formArray in Angular 10 formGroup

Question

i have problem with angular 10 form. I get two different errors in console:

• Cannot find control with path: 'observationDataArray -> 0 -> readArray'
• Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

EDIT: Stackblitz - https://stackblitz.com/edit/angular-ivy-ekf7gb?file=src/app/app.component.html

EDIT1: I figure it out why the nested array was the problem. in model class the array wasnt initialized. Now i have problem with adding new array object - in this example i cant add new meterRead section

Code snipets below:

observation-data.ts

export class ObservationData {
  energyProduct: string;
  productMeasureUnit: string;
  listOfMeterRead: Read[];
}

read.ts

export class Read {
  meterSerialNo: string;
}

publish-handling-page.component.ts

export class PublishHandlingPageComponent implements OnInit {
  publishForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit(): void {

    this.publishForm = this.formBuilder.group({
      observationDataArray: this.formBuilder.array([
        this.formBuilder.group(new ObservationData())
      ])
    });
    this.meterReadArray;
  }

  get observationDataArray(): FormArray {
    return this.publishForm.get('observationDataArray') as FormArray;
  }

  addObservationElement() {
    let fg = this.formBuilder.group(new ObservationData());
    this.observationDataArray.push(fg);
  }
  deleteObservationDataElement(idx: number) {
    this.observationDataArray.removeAt(idx);
  }

  get readArray(): FormArray {
    return this.formBuilder.array([
      this.formBuilder.group(new Read())
    ])
  }

  addReadElement() {
    let fg = this.formBuilder.group(new Read());
    this.readArray.push(fg);
  }
  deleteReadElement(idx: number) {
    this.readArray.removeAt(idx);
  }

publish-handling-page.component.html

<div class="container py-5">
  <div class="row">
    <div class="col-md-10 mx-auto">
      <form [formGroup]="publishForm">
        <div class="form-group row">
          <div class="col-sm-4">
            <label for="documentBusinessId">ID dokumentu</label>
            <input type="text" class="form-control" id="documentBusinessId" placeholder="ID dokumentu"
                   required>
          </div>
          <div class="col-sm-4">
            <label for="referenceDocumentBusinessId">ID dokumentu</label>
            <input type="text" class="form-control" id="referenceDocumentBusinessId"
                   placeholder="ID dokumentu"
                   required>
          </div>
        </div>

        <div formArrayName="observationDataArray">
          <div *ngFor="let obsData of observationDataArray.controls; let i = index" [formGroupName]="i">
            <p>
              <b>ObservationData : {{i + 1}}</b>
            </p>
            <div class="col-sm-6">
            <label for="energyProduct">Kod produktu</label>
            <select class="form-control" id="energyProduct">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
            </div>
            <div class="col-sm-6">
            <label for="productMeasureUnit">Kod jednostki miary</label>
            <select class="form-control" id="productMeasureUnit">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
            </div>
            <div formArrayName="readArray">
              <div *ngFor="let mrArray of readArray; let j = index" [formGroupName]="j">
                <p>
                  <b>MeterRead : {{j + 1}}</b>
                </p>
                <label for="meterSerialNo">meterSerialNo</label>
                <input type="text" class="form-control" id="meterSerialNo" placeholder="Data wyznaczenia"
                       required>
              </div>
              <button type="button" >Delete</button>
              <button (click)="addReadElement()" type="button">Dodaj nową sekcję</button>
            </div>
            <button class="btn btn-primary px-4 float-right mt-2 mr-4" (click)="deleteObservationDataElement(i)" type="button">Delete</button>
            
          <button type="button" class="btn btn-primary px-4 mt-2" (click)="addObservationElement()">Dodaj nową sekcję</button>
        </div>

        <button type="button" class="btn btn-primary px-4 float-left mt-2">Save</button>
      </form>
    </div>
  </div>
</div>

i have a lot of more nested objects in my model classes but for now i have now idea what am i doing wrong with this two. Maybe you guys have any idea ?

Thanks in advance.