Angular 14: Cannot find control with path: 'iterations -> 1 -> sapcoMonths -> [object Object] -> iterationSapcoMonthId'

Question

Hi I am using reactive form to build a in line check box of Months from Jan to Dec in a for loop. I am getting below error , this oce works fine in Angular 2, I have migrated the code to Anuglar 14 and this error has started.

1.Cannot find control with path: 'iterations -> 1 -> sapcoMonths -> [object Object]' 2. Error: Cannot find control with path: 'iterations -> 1 -> sapcoMonths -> [object Object] -> iterationSapcoMonthId' 3.Cannot find control with path: 'iterations -> 1 -> sapcoMonths -> [object Object] -> iterationSapcoMonthId -> sapcoMonth' 4. Error: Cannot find control with path: 'iterations -> 1 -> sapcoMonths -> [object Object] -> iterationSapcoMonthId -> sapcoMonth'

and so on..

Below is the html code:

                            <div class="form-inline">
                              <span formArrayName="sapcoMonths" *ngFor="
                                  let sapcoMonth of item['controls']
                                    .sapcoMonths['controls'];
                                  let j = index;
                                ">
                                <div class="checkbox">

                                  <span [formGroupName]="sapcoMonth">
                                    <span formGroupName="iterationSapcoMonthId">
                                      <input type="checkbox" id="sapcoMonth{{i}}{{j}}"
                                        formControlName="sapcoMonth"/>
                                      <label for="sapcoMonth">{{ months[j].name }}</label>
                                    </span>
                                  </span>
                                </div>
                              </span>
                            </div>

Type Script code:

private loadIterationSapcoMonthData(
    iterationSapcoMonths: IterationSapcoMonth[]
  ): FormArray {
   

     let iterationSapcoMonthArray = this.formBuilder.array([]);
    this.months.forEach((month) => {
      iterationSapcoMonthArray.push(
        new FormControl(
          this.formBuilder.group({
            iterationSapcoMonthId: this.formBuilder.group({
              sapcoMonth: iterationSapcoMonths ? iterationSapcoMonths.some( (iterationSapcoMonth) =>
                    iterationSapcoMonth.iterationSapcoMonthId.sapcoMonth ===month.number): true
            })
          })
        )
      );
    });
    return iterationSapcoMonthArray;
  }