typescript - No se puede encontrar el control con atributo name no especificado Angular 14

Estoy enfrentando el siguiente error.

Y cuando hago clic en la línea señalada con FLECHA AZUL en la imagen de arriba, apunta a of del bucle ngFor en mi plantilla HTML.

     <div class="w-[60%]">
       <select
        name="duration"
        id=""
        class="text-[1rem] leading-6 py-2 px-8 border border-[#BCBCBC] w-[27.875rem] rounded-md focus:outline-none focus:border-primary"
        [formControl]="demoLength"
        required
      >
        <option
          [value]="timing.value"
          *ngFor="let timing of staticDurationArray"
          selected="{{ timing.selected }}"
        >
          {{ timing.time }}
        </option>
      </select>
    </div>

Y en el código anterior, el staticDurationArray es un arreglo con datos estáticos en el archivo TS

staticDurationArray = [
    {
      time: '15 min',
      value: 15,
      selected: '',
    },
    {
      time: '30 min',
      value: 30,
      selected: '',
    },
    {
      time: '45 min',
      value: 45,
      selected: '',
    },
    {
      time: '1 hr',
      value: 60,
      selected: '',
    },
]


       
         

Respuesta #1

Encontré la respuesta, intenté poniendo una condición *ngIf en mi fragmento de código y el problema se resolvió

<div class="w-[60%]">
              <select
                *ngIf="demoLength"
                [formControl]="demoLength"
                name="duration"
                id=""
                class="text-[1rem] leading-6 py-2 px-8 border border-[#BCBCBC] w-[27.875rem] rounded-md focus:outline-none focus:border-primary"
                required
              >
                <option
                  [value]="timing.value"
                  *ngFor="let timing of staticDurationArray"
                  selected="{{ timing.selected }}"
                >
                  {{ timing.time }}
                </option>
              </select>
            </div>