Reactive Forms, push another form group to a specific index in the form array

Question

I have inserted formgroup in my form array, now what I want to do is, on that formgroup, I want to push another form group on a specific index, I am working with this code but can't make it work.

//FORM
roomForm = this.formBuilder.group({
           roomNumber: ['', Validators.required],
           floorNumber: ['', Validators.required],
           type: ['', Validators.required],
           bedSpace: this.formBuilder.array([]),
           status: ['', Validators.required],
           tenant: [''],
           _id: ['']
  });
//GETTING THE bedSpace control
 get bedSpace() {
  return this.roomForm.get('bedSpace') as FormArray;
 }

//Adding form group to bedSpace control, p.s this is working fine
addBed() {
this.bedSpace.push(
    this.formBuilder.group({
      bedNumber: [bedNumber]

      })
  );
}

//Add new group to an existing form group in form array, this is the code 
that i cant make to work
addDeck(i: number) {
 this.roomForm.get(`bedSpace.${i}`).patchValue(
   this.formBuilder.group({
      deckNumber: [],
      status: [],
      dueRent: [],
      tenant: []
    })
);
}

Below is the screenshot of the json, What I want is to push the form group to index 0

       <div formArrayName="bedSpace">



        <div *ngFor="let bed of bedSpace.controls; let i = index">
          <mat-card fxLayoutAlign="space-between center" id="bed-panel">
            <span>
              BED
            </span>
            <span fxLayout="column" >
               <mat-icon id="remove-bed" 
    (click)="removeBed(i)">remove_circle_outline</mat-icon>
               <mat-icon id="add-deck" (click)="addDeck(i)">list</mat-icon>
            </span>
          </mat-card>
          <form [formGroup]="bed">
            <mat-form-field>
              <input matInput type="number" placeholder="Bed number" 
    formControlName="bedNumber">
            </mat-form-field>

This is how i display the input field for decks FormGroup, i get this "Cannot read property 'controls' of undefined" error, my guess is that it cannot see the "decks.controls" when it compiles, cause this is only added when I, add Deck, now my problem is where to put this "decks.controls".

            <div *ngFor="let deck of decks.controls; let i = index">
              <div [formGroup]="deck">
                <mat-form-field>
                  <input matInput type="number" placeholder="Deck number" 
   formControlName="deckNumber">
                </mat-form-field>
                <mat-form-field>
                  <mat-select placeholder="Bed status" 
   formControlName="deckStatus">
                    <mat-option *ngFor="let bedStatus of 
   roomEnumService.roomBedStatus;" [value]="bedStatus">
                      {{bedStatus}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <mat-form-field>
                  <input matInput type="text" placeholder="Due rent" 
   formControlName="dueRent">
              </mat-form-field>
              <mat-form-field>
                <input matInput type="number" placeholder="Tenant" formControlName="tenant">
              </mat-form-field>
              </div>
            </div>
          </form>
        </div>
      </div>

Answer 1

After studying the API in https://angular.io/api/forms/FormArray, I revised your code to below. Please check if that is what you want.

addDeck(i: number) {
  const bs = this.bedSpace.at(i) as FormGroup;
  let decks = bs.get('decks') as FormArray;
  if (!decks) {
    decks = this.formBuilder.array([]);
    bs.addControl('decks', decks);
  }
  decks.push(this.formBuilder.group({
    deckNumber: [],
    status: [],
    dueRent: [],
    tenant: []
  }));
}