Angular Form Array - error: Cannot find control with path

Question

I have a loop which dynamically creates inputs within the form for each day between choosen date range. I want to be able to validate each input separately (needs to be between 0-100% and not empty). I am trying to create a Form Array with all the inputs but I am getting an error "Cannot find control with path" (screenshot attached). Can I ask for help with that? Thank you in advance.

html code:

<form [formGroup]="myform">
              <div style="flex-wrap: nowrap !important" class="clr-row">
                <div *ngFor="let listOfDay of listOfDays; let b = index">
                  <p class="text-center">{{ listOfDay }}</p>

                  <div
                    *ngFor="
                      let tes of groupedDailyGoals[i].firstdays;
                      let n = index
                    "
                  >
                    <div style="margin-top: 46px" *ngIf="n === b">&nbsp;</div>
                  </div>

                  <div formArrayName="monthPercentages">
                    <div *ngFor="let dailyGoal of dailyGoals; let p = index">
                      <div
                        class="clr-col-12"
                        *ngIf="
                          dailyGoal.date.getMonth() ===
                            i + startDate.getMonth() &&
                            startDate.getMonth() < 12 &&
                            startDate.getFullYear() ===
                              dailyGoal.date.getFullYear() &&
                            (dailyGoal.date.getDay() + 6) % 7 === b;
                          else checkIfNextYear
                        "
                      >
                        <clr-input-container
                          style="align-items: center !important"
                          class="text-center"
                        >
                          <label for="dailyPercentage">
                            {{ dailyGoal.date | date: "d. MMM" }}
                          </label>

                          <input
                            [formControlName]="p"
                            pattern="^[0-9][0-9]?$|^100$"
                            name="dailyPercentage"
                            clrInput
                            clrNumeric
                            value="{{ dailyGoal.percentage }}"
                            clrUnit="%"
                            class="text-center"
                            required
                          />

                          <clr-control-error *clrIfError="'validpercentage'"
                            >0-100%</clr-control-error
                          >
                          <clr-control-error *clrIfError="'pattern'"
                            >0-100%</clr-control-error
                          >
                          <clr-control-error *clrIfError="'required'"
                            >0-100%</clr-control-error
                          >
                        </clr-input-container>
                       
                      </div>

                      <ng-template #checkIfNextYear>
                        <div
                          class="clr-col-12"
                          *ngIf="
                            dailyGoal.date.getMonth() ===
                              i + startDate.getMonth() - 12 &&
                            endDate.getFullYear() ===
                              dailyGoal.date.getFullYear() &&
                            (dailyGoal.date.getDay() + 6) % 7 === b
                          "
                        >
                          <clr-input-container
                            style="align-items: center !important"
                            class="text-center"
                          >
                            <label for="dailyPercentage">
                              {{ dailyGoal.date | date: "d. MMM" }}
                            </label>

                            <input
                              [formControlName]="p"
                              pattern="^[0-9][0-9]?$|^100$"
                              name="dailyPercentage"
                              clrInput
                              clrNumeric
                              value="{{ dailyGoal.percentage }}"
                              clrUnit="%"
                              class="text-center"
                              required
                            />

                            <clr-control-error *clrIfError="'validpercentage'"
                              >0-100%</clr-control-error
                            >
                            <clr-control-error *clrIfError="'pattern'"
                              >0-100%</clr-control-error
                            >
                            <clr-control-error *clrIfError="'required'"
                              >0-100%</clr-control-error
                            >
                          </clr-input-container>
                        
                        </div>
                      </ng-template>
                    </div>
                  </div>
                </div>
              </div>
            </form>

typescript code:

constructor(
    private fb:FormBuilder

  ) {
    this.createForm();
this.monthPercentages = new FormArray([
new FormControl(this.percentage, Validators.pattern('^[0-9][0-9]?$|^100$'))
]);
   this.myform = new FormGroup({
  monthPercentages: this.monthPercentages
});
  }
  createForm() {
    this.myform = this.fb.group({
     monthPercentages: this.fb.array([])
    });
   }
   get monthsArray(): FormArray {
    return this.myform.get('monthPercentages') as FormArray;
  }

And in a consol I am getting this error:

error screenshot

Thank you in advance for help.