title: ERROR Error: Cannot find control with path
body: <p>I'm new to Angular and tried to extend the example code from: <a href="https://stackoverflow.com/questions/43520010/angular-4-form-formarray-add-a-button-to-add-or-delete-a-form-input-row/43521492">Angular 4 Form FormArray Add a Button to add or delete a form input row</a></p>
  <p>If a certain option was picked in a dropdown, new options for that option should be  expressable. I got to this point without problems, but implementing the formControlName Tags for those 'lower-tier-options' are throwing me an error:</p>
  <blockquote>
  <p>ContentComponent.html:56 ERROR Error: Cannot find control with path: 'inhalt -&gt; 0 -&gt; optionsKey'(…)</p>
  <p>the exact line in the .html is: (input formControlName=&quot;optionsKey&quot; )</p>
  </blockquote>
  <p>I looked for those errors in other threads(<a href="https://stackoverflow.com/questions/39679637/angular-2-form-cannot-find-control-with-path">Angular 2 Form &quot;Cannot find control with path&quot;</a>) or (<a href="https://stackoverflow.com/questions/44220306/angular-2-reactive-forms-cannot-find-control-with-path">Angular 2 Reactive Forms: Cannot find control with path</a>) or (<a href="https://stackoverflow.com/questions/44935178/error-cannot-find-control-with-path-x-angular-2">Error: Cannot find control with path: &#39;x &#39; angular 2</a>), but their problems are based on creating ReactiveForm-Components without the FormBuilder. I created all my ReactiveForm-Components with the Formbuilder, which you will see in my code.</p>
  <p>Did I maybe miss something or am doing it the wrong way?</p>
  <p><strong>content.html</strong></p>
  <pre><code>&lt;h3 class=&quot;page-header&quot;&gt;Formular-Abschnitt hinzufügen&lt;/h3&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;addNewFormControl()&quot; class=&quot;btn btn-primary&quot;&gt;Neues Formularelement&lt;/button&gt;&lt;br&gt;
  &lt;form [formGroup]=&quot;formContent&quot;&gt;
    &lt;div&gt;
      &lt;label&gt;Bezeichnung des Abschnittes&lt;/label&gt;
      &lt;input formControlName=&quot;absatz&quot;&gt;
    &lt;/div&gt;
    &lt;div formArrayName=&quot;inhalt&quot;&gt;
  
      &lt;!--
      In the template we are iterating this formarray,
          and that is just the path to the formarray, which is:
  
          invoiceForm.controls.itemRows.controls
  
          'invoiceForm' being the complete form object, 'controls' being the content of the form object,
          'itemRows' being the (form)array in the form, 'controls' being the content of the formarray.
  
      --&gt;
  
      &lt;div *ngFor=&quot;let itemrow of formContent.controls.inhalt.controls; let i=index&quot; [formGroupName]=&quot;i&quot;&gt;
        &lt;h4&gt;Formular-Element #{{ i + 1 }}&lt;/h4&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Element-Name&lt;/label&gt;
          &lt;input formControlName=&quot;label&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Element-Key&lt;/label&gt;
          &lt;input formControlName=&quot;key&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Element-zwingend notwendig?&lt;/label&gt;
          &lt;input type=&quot;checkbox&quot; formControlName=&quot;required&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Element-Position&lt;/label&gt;
          &lt;input formControlName=&quot;order&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Element-Art&lt;/label&gt;
          &lt;select formControlName=&quot;controlType&quot; class=&quot;form-control&quot;&gt;
            &lt;option&gt;InputField&lt;/option&gt;
            &lt;option&gt;Checkbox&lt;/option&gt;
            &lt;option&gt;Radiobutton&lt;/option&gt;
            &lt;option&gt;Dropdown&lt;/option&gt;
            &lt;option&gt;Beschreibungstext&lt;/option&gt;
          &lt;/select&gt;
          &lt;div [ngSwitch]=&quot;formContent.value.inhalt[i].controlType&quot;&gt;
            &lt;div *ngSwitchCase=&quot;'Checkbox'&quot;&gt;
              &lt;h3&gt;Optionen definieren:&lt;/h3&gt;
              &lt;button (click)=&quot;addFormControlOptions()&quot;&gt;Neue Option hinzufügen&lt;/button&gt;
              &lt;div *ngFor=&quot;let test of itemrow.controls.options.controls; let x = index&quot; &gt;
                {{test.controls.optionsKey.value}}
                &lt;div&gt;
                  &lt;label &gt;Key: &lt;/label&gt;
                  &lt;input formControlName=&quot;optionsKey&quot; &gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;label&gt;Value: &lt;/label&gt;
                  &lt;input&gt;
                &lt;/div&gt;
                &lt;button (click)=&quot;deleteFormControlOptions(x)&quot;&gt;Option entfernen&lt;/button&gt;
              &lt;/div&gt;
  
  
  
            &lt;/div&gt;
            &lt;div *ngSwitchCase=&quot;''&quot;&gt;
              &lt;p&gt;lololololo&lt;/p&gt;
            &lt;/div&gt;
            &lt;div *ngSwitchDefault=&quot;&quot;&gt;
              &lt;p&gt;DEFAULT&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
        &lt;/div&gt;
        &lt;button *ngIf=&quot;formContent.controls.inhalt.controls.length &gt; 1&quot; (click)=&quot;deleteFormControl(i)&quot;
                class=&quot;btn btn-danger&quot;&gt;Delete Button
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;!--&lt;pre&gt;{{formContent.value | json}}&lt;/pre&gt;--&gt;
  &lt;button type=&quot;submit&quot; (click)=&quot;saveData()&quot;&gt;Formular-Abschnitt speichern&lt;/button&gt;
  </code></pre>
  <p><strong>content.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Form, FormArray, FormBuilder, FormGroup} from '@angular/forms';
  import {isBoolean, isNumber} from 'util';
  
  @Component({
    selector: 'app-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.css']
  })
  export class ContentComponent implements OnInit {
  
  
    public formContent: FormGroup;
    absatz;
  
    constructor(private _fb: FormBuilder) { }
  
    ngOnInit() {
      this.formContent = this._fb.group({
        absatz: '',
        inhalt: this._fb.array([this.initFormElements()])
      });
    }
    initFormElements() {
      return this._fb.group({
        label: '',
        key: '',
        order: isNumber(),
        controlType: '',
        required: isBoolean(),
        options: this._fb.array([this.initFormElementOptions()])
      });
    }
    initFormElementOptions() {
      return this._fb.group({
        optionsKey: '',
        optionsValue: ''}
      );
    }
    addNewFormControl() {
      const control = &lt;FormArray&gt;this.formContent.controls['inhalt'];
      control.push(this.initFormElements());
    }
    deleteFormControl(index: number) {
      const control = &lt;FormArray&gt;this.formContent.controls['inhalt'];
      control.removeAt(index);
    }
  
    saveData() {
  
      return this.formContent.value;
    }
     addFormControlOptions() {
     // const control = &lt;FormArray&gt;this.formContent.controls['inhalt'].controls[0].options;
     // control.push(this.initFormElementOptions());
     }
     deleteFormControlOptions(index: number) {
       const control = &lt;FormArray&gt;this.formContent.controls['inhalt'].value[0].options;
       control.removeAt(index);
     }
  }
  </code></pre>
  <p>Plunker:
  <a href="https://embed.plnkr.co/LIcp9vpGDCAWH9qZacQT/" rel="nofollow noreferrer">https://embed.plnkr.co/LIcp9vpGDCAWH9qZacQT/</a></p>
  <p>Thanks in advance!</p>
  <p><strong>Update:</strong>
  I needed to add a formArrayName=&quot;options&quot; to my SwitchCase and a formGroupName=&quot;x&quot;(where I used the index x of the ngFor) for the ngFor-Div.</p>