Ошибка Error: Cannot find control with name: '0' и Error: Cannot find control with name: '1'

Делаю форму на Angular. Вот код из файла TS

import {Component, OnInit} from '@angular/core'
import {environment} from 'src/environments/environment'
import {VehicleService} from '../../../core/service/rider/vehicle.service'
import {GetRiderService} from '../../../core/service/rider/get-rider.service'
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'


@Component({
  selector: 'app-transport',
  templateUrl: './transport.component.html',
  styleUrls: ['./transport.component.sass']
})
export class TransportComponent implements OnInit {
  environment = environment
  transOptsForm: FormGroup

  constructor(
    public vehicleSvc: VehicleService,
    public getRiderSvc: GetRiderService,
    private fb: FormBuilder
  ) {
    this.transOptsForm = this.fb.group({
      transOptsArr: this.fb.array([
      ])
    })
    console.log('=======', this.transOptsForm)

  }
  async ngOnInit(): Promise<any> {
    await this.getRiderSvc.getVehicleTypes()
    await this.addCard()
    await this.setValue()
    console.log('ПОЛУЧИЛИ МАССИВ СЛИЯНИЯ', this.vehicleSvc.transOptsMerge)
    console.log('MASSIW', this.vehicleSvc.transOptsMerge)
  }
  createForm(): FormGroup {
    return this.fb.group({
      width: new FormControl('', [
        Validators.pattern('^[0-9]+$'),
        Validators.required
      ]),
      height: new FormControl('', [
        Validators.pattern('^[0-9]+$'),
        Validators.required
      ]),
      length: new FormControl('', [
        Validators.pattern('^[0-9]+$'),
        Validators.required
      ]),
      weight: new FormControl('', [
        Validators.pattern('^[0-9]+$'),
        Validators.required
      ])
    })
  }

  addCard() {
    for (let i = 0; i < this.vehicleSvc.transOptsMerge.length; i++) {
      let fg = this.fb.group(this.createForm())
      this.transOptsControls.push(fg)
    }
    console.log('ADD CARD', this.vehicleSvc.transOptsMerge)
  }

  setValue() {
    for (let i = 0; i < this.vehicleSvc.transOptsMerge.length; i++) {
      const options = [...this.vehicleSvc.transOptsMerge]
      console.log('ADD CARD', this.vehicleSvc.transOptsMerge)
      this.transOptsControls[i]?.setValue({
          width: options[i].max_width,
          height: options[i].max_height,
          length: options[i].max_length,
          weight: options[i].max_weight
        })

    }
    console.log('SET VALUE====', this.transOptsControls.controls[0])

  }


  get transOptsControls(): FormArray  {
    return this.transOptsForm.get('transOptsArr') as FormArray
  }



  onBlur() {
    console.log('HI')
  }
}

Вот код из верстки

<h5 class="card-title">Transport options</h5>
<div class="row no-gutters">
  <div class="card-wrap col-12 d-sm-flex justify-content-sm-around">
    <form [formGroup]="transOptsForm">
      <div class="card mx-sm-2"

           formArrayName="transOptsArr"

           style="width: 280px"
           *ngFor="let transOpt of transOptsControls.controls; let idx = index"
           [formGroupName]="idx">
        <div class="card-body">
          <div class="card-content">
            <div class="card-img">
              <!--            <img [src]="environment.api_url + transOpt.icon.url" alt="">-->
              <!--            <h6 class="card-subtitle">{{transOpt.name}}</h6>-->
<!--              <p>{{idx}}</p>-->
            </div>

            <div class="card-text">
              <mat-form-field>
                <mat-label>width</mat-label>
                <input type="text"
                       maxlength="5"
                       matInput

                       (blur)="onBlur()">
              </mat-form-field>


              <mat-form-field>
                <mat-label>height</mat-label>
                <input type="text"
                       maxlength="5"
                       matInput

                       (blur)="onBlur()">
              </mat-form-field>

              <mat-form-field>
                <mat-label>length</mat-label>
                <input type="text"
                       maxlength="5"
                       matInput

                       (blur)="onBlur()">
              </mat-form-field>

              <mat-form-field>
                <mat-label>weight</mat-label>
                <input type="text"
                       maxlength="5"
                       matInput

                       (blur)="onBlur()">
              </mat-form-field>


              <!--            <p>Max width: {{transOpt.max_width}}</p>-->
              <!--            <p>Max height: {{transOpt.max_height}}</p>-->
              <!--            <p>Max length: {{transOpt.max_length}}</p>-->
              <!--            <p>Max weight: {{transOpt.max_weight}}</p>-->
              <!--            <p *ngIf="transOpt.thermobox">Thermobox:-->
              <!--              <span >-->
              <!--                    <svg-->
              <!--                      xmlns="http://www.w3.org/2000/svg"-->
              <!--                      width="16" height="16"-->
              <!--                      fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">-->
              <!--                          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>-->
              <!--                    </svg>-->
              <!--                  </span>-->
              <!--            </p>-->
            </div>



          </div>


        </div>


      </div>
    </form>

  </div>
</div>

При написании строки [formGroupName]="idx" в консоль выводится ошибка Error: Cannot find control with name: '0' и Error: Cannot find control with name: '1'. В каком участке кода может быть проблема?