title: Cannot find control with name: '0'
body: <p>I have to make a form consisting of a series of dynamically created check buttons. I was inspired by the code taken from a site, but it always gives me this error: &quot;Cannot find control with name: '0'&quot;. How can I solve it? Thank you all!</p>
  <p>Code typescript:</p>
  <pre><code>import { Component, OnInit, Input } from '@angular/core';import { FiguraProfessionale } from 'src/app/model/FiguraProfessionale';
  import { FiguraProfessionaleCompetenza } from 'src/app/model/FiguraProfessionaleCompetenza';
  import { Competenza } from 'src/app/model/Competenza';
  import { AssociaFiguraProfessionaleCompetenzeServiceService } from '../associa-figura-professionale-competenze-service.service';
  import { Router } from '@angular/router';
  import { FormGroup, FormBuilder, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  @Component({
    selector: 'app-associa-figura-professionale-competenze',
    templateUrl: './associa-figura-professionale-competenze.component.html',
    styleUrls: ['./associa-figura-professionale-competenze.component.css']
  })
  export class AssociaFiguraProfessionaleCompetenzeComponent implements OnInit {
  
    figuraProfessionaleCompetenza: FiguraProfessionaleCompetenza;
  
    listaFiguraProfessionale: Array&lt;FiguraProfessionale&gt;;
  
    listaCompetenza: Array&lt;Competenza&gt;;
  
    form: FormGroup;
  
    constructor(private formBuilder: FormBuilder, private servizio: AssociaFiguraProfessionaleCompetenzeServiceService, private route: Router) {
      this.form = this.formBuilder.group({
        competenzeScelte: new FormArray([])
      });
      this.figuraProfessionaleCompetenza = new FiguraProfessionaleCompetenza();
      this.listaCompetenza = JSON.parse(sessionStorage.getItem(&quot;listaCompetenza&quot;));
      this.listaFiguraProfessionale = JSON.parse(sessionStorage.getItem(&quot;listaFiguraProfessionale&quot;));
      this.addCheckboxes();
    }
  
    get competenzeFormArray() {
      return this.form.controls.competenzeScelte as FormArray;
    }
  
    private addCheckboxes() {
      this.listaCompetenza.forEach(() =&gt; this.competenzeFormArray.push(new FormControl(false)));
    }
  
    ngOnInit(): void {
    }
  
    inserisci() {
      const competenzeSelezionate = this.form.value.competenzeScelte
        .map((checked, i) =&gt; checked ? this.listaCompetenza[i].id : null)
        .filter(v =&gt; v !== null);
      console.log(competenzeSelezionate);
    }
  
  }
  
  </code></pre>
  <p>Code HTML:</p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
      &lt;form [formGroup]=&quot;form&quot; (ngSubmit)=&quot;inserisci()&quot;&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor=&quot;let competenza of competenzeFormArray.controls; let i = index&quot;&gt;
                      &lt;td&gt;&lt;input type=&quot;checkbox&quot; [formControlName]=&quot;[i]&quot;&gt;&lt;/td&gt;
                      &lt;td&gt;{{listaCompetenza[i].codice}} {{listaCompetenza[i].descrizione}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button class=&quot;special rounded-pill&quot; &gt; Inserisci &lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>