Не удается найти элемент управления с путем: 'items -> 0 ->

Question

`У меня есть форма myFrom, в которой у меня есть элемент управления dtPickerControl и кнопка.

При нажатии этой кнопки я хочу динамически генерировать кнопку с использованием массива форм.

мой шаблон формы: -`

<form [formGroup]="myForm" class="example-container">
<div class="example-button-row">
      <button mat-raised-button color="primary" (click)="MTodayAvlblty()">Morning</button>
</div>
<mat-card>
  <mat-form-field>
    <input matInput formControlName="dtPickerControl" [min]="minDate" [matDatepicker]="dp3" id="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>
</mat-card>
<mat-card *ngIf="userData">
  <div 
  formArrayName="items"
  *ngFor="let item of myForm.get('items').controls; let i = index;">
  <div formGroupName="{{i}}">
    `[****] I want to add below button`
    <button mat-raised-button formControlName="{{i}}"
    color="accent" (click)="ETodayAvlbltyy(i)">{{i}}</button>
    </div>
  </div>
</mat-card>
</form>

This is my component

myForm: FormGroup;
constructor(private _homeService: HomeService, private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({ 
        'dtPickerControl': [{ value: '', disabled: true }, [Validators.required]],
        items: this.formBuilder.array([
        this.formBuilder.control('', Validators.required),
        ])
    })
}
MTodayAvlblty() { 
    this.BookingData('userId123', 'Morning');
}

private BookingData(userName: string, flag: string): void {
    ..subscribe(data => {
    this.userData = data as userData[]; 

    this.items = this.myForm.get('items') as FormArray;
    for (let index = 0; index < this.userData.length; index++) {

      (<FormArray>this.myForm.get('items')).push(this.formBuilder.control('',Validators.required))
    } 
  })
}

При этой подписке я хочу добавить данные здесь [****]