title: Error: "Cannot find control with path: 'dispositivosForm'"
body: <p><strong>Edit 1:</strong> I'm pretty sure (not 100% certain though) the error lies within the formArrayName declaration, as building the form without it yields positive results. Could this be something related to the form not navigating the formArray correctly?</p>
  
  <hr>
  
  <p>I have the following errors when trying to build a dynamic formarray with data from my database</p>
  
  <pre><code>ERROR Error: "Cannot find control with path: 'dispositivosForm -&gt; 0'"
  ERROR Error: "Cannot find control with path: 'dispositivosForm -&gt; 1'"
  ERROR Error: "Cannot find control with path: 'dispositivosForm -&gt; 2'"
  [...]
  </code></pre>
  
  <p>all the way to 11 approx.</p>
  
  <p>I've searched in threads with similar issues but none of them were helpful in my case.</p>
  
  <p>What I'm trying to do is to add an edit form which uses the FormArray to pre-select certain options in the select fields I'm building based on data retrieved from DB. </p>
  
  <p>Right now the data is being retrieved and (apparently) stored on the FormArray without issues. But when I try to display the select fields, it breaks and gives the above error. </p>
  
  <p>This edit form shares space with the create form, that's why I'm looping through dispositivosByClase and clase.dispositivo to generate empty fields for the user to interact with.</p>
  
  <p>Here's the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div formArrayName="dispositivosForm" *ngFor="let clase of dispositivosByClases; index as i;"&gt;
      &lt;div [formGroupName]="i"&gt;
          &lt;h6&gt;{{ clase.nombre }}&lt;/h6&gt;
          &lt;div&gt;
              &lt;mat-form-field&gt;
                  &lt;mat-label&gt;&lt;/mat-label&gt;
                  &lt;mat-select formControlName="dispositivos" multiple&gt;
                      &lt;mat-option *ngFor="let dispo of clase.dispositivos" [value]="dispo.id"&gt;
                          {{ dispo.descripcion }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre><code>  equipoForm: FormGroup;
    dispositivos: any = [];
    dispositivosByClases = [];
    dispoArray = [];
    dispoArrayValue = [];
    labelDispositivos: any[] = [];
    dispositivosForm: FormArray = new FormArray([]);
  </code></pre>
  
  <p>.</p>
  
  <pre><code>ngOnInit() {
      // Inicializa campos
      this.equipoForm = this.fb.group({
        id: [''],
        numero_cupi: [''],
        numero_serie: [''],
        descripcion: [''],
        dispositivosForm: [],
        numero_licencia_window: [],
        codigo: ['', [Validators.required]],
        partida_id: [''],
        partida: ['', [Validators.required]],
        enable: [true],
      });
  </code></pre>
  
  <p>.</p>
  
  <pre><code>prepareClaseDispositivo() {
      this.dispositivos.forEach(dispo =&gt; {
        if (!this.labelDispositivos.includes(dispo.clase_dispositivo.nombre)) {
          this.labelDispositivos.push(dispo.clase_dispositivo.nombre);
        }
      });
      this.labelDispositivos.forEach(clase =&gt; {
        const dispositivosByClase = [];
        this.dispositivos.forEach(dispo =&gt; {
          if (clase === dispo.clase_dispositivo.nombre) {
            if (this.data.dispositivos) {
              for (const d of this.data.dispositivos) {
                if (d.descripcion === dispo.descripcion) {
                  this.dispoArrayValue.push(dispo);
                }
              }
            }
            dispositivosByClase.push(dispo);
          }
        });
        this.dispositivosByClases.push({ nombre: clase, dispositivos: dispositivosByClase });
        if (this.data.edit) {
          this.dispoArrayForm();
        }
      });
      this.dispositivosForm.push(this.generateFormGroup(this.dispoArrayValue));
      console.log(this.dispositivosForm);
    }
  </code></pre>
  
  <p>.</p>
  
  <pre><code>  generateFormGroup(dispo: any) {
      return new FormGroup({
        dispositivos: new FormControl(this.dispoArrayValue)
      });
    }
  </code></pre>
  
  <p>FormArray output:</p>
  
  <pre><code>{…}
  ​
  _onCollectionChange: function _onCollectionChange()​
  _onDisabledChange: Array []
  ​
  asyncValidator: null
  ​
  controls: Array [ {…} ]
  ​
  errors: null
  ​
  pristine: true
  ​
  status: "VALID"
  ​
  statusChanges: Object { _isScalar: false, closed: false, isStopped: false, … }
  ​
  touched: false
  ​
  validator: null
  ​
  value: (1) […]
  ​​
  0: {…}
  ​​​
  dispositivos: (1) […]
  ​​​​
  0: Object { id: "eyJpdiI6InFQYTJEbmpENm9lVCsrVVdxZEo3eUE9PSIsInZhbHVlIjoiSTVIaVwvRHVXOFdvS2h6TXNaeURsNHc9PSIsIm1hYyI6IjFiMGJlNmI1NzQ1NGFiZGQ2ZDhjZDJlMzE3MmY1NmYyOTBmMTg1YjdlNTk3OTA3Y2MzMjQwZDEwNzNlZjMwNzgifQ==", descripcion: "9", enable: true, … }
  ​​​​
  length: 1
  ​​​​
  &lt;prototype&gt;: Array []
  ​​​
  &lt;prototype&gt;: Object { … }
  ​​
  length: 1
  ​​
  &lt;prototype&gt;: Array []
  ​
  valueChanges: Object { _isScalar: false, closed: false, isStopped: false, … }
  ​
  &lt;prototype&gt;: Object { … }
  equipo-new-edit.component.ts:155:12
  </code></pre>