title: Angular 8: Dynamically set formControlName in html based on component
body: <p>In db table, I have "key_name" which is successfully returning in API and working great.</p>
  
  <p>What I want to do is to set those fields value as a <code>formControlName</code> in html and in component I am using the reactive form so I have tried <code>formArrayName</code>.</p>
  
  <p>Based on the change event I am pushing new <code>formControl</code> in <code>categoryArray</code> and assigning its key as db field's value.</p>
  
  <p>here is my Html:</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
                              &lt;div formArrayName="categoryArray" *ngFor="let type of types; let k = index"&gt;
                                  &lt;div [formGroupName]="k"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label&gt;Select {{ type.cat_name }}&lt;/label&gt;
                                          &lt;select class="form-control custom-select" 
                                              (change)="onChangeType($event.target.value)"
                                              formControlName="{{ type.key_name }}" &gt;
                                              &lt;option value=""&gt;-- Select --&lt;/option&gt;
                                              &lt;option *ngFor="let type of types" [value]="type.category_id"&gt;
                                                  {{type.cat_name}}
                                              &lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>onChangeCategory(id) {
      if(id) {
        this.artistService.fetchTypeAndSubTypes(id).subscribe(res =&gt; {
          if (res.status == 200) {
            this.types = res.data
  
            this.addInNewCategory(this.types)
  
          }
        })
      } else {
        this.types = null
        this.subTypes = null
      }
    }
  
    get category(): FormArray {
      return &lt;FormArray&gt;this.uploadArtWorkForm.controls.categoryArray;
    }
  
    addInNewCategory(types) {
      let obj = {}
  
      types.forEach(element =&gt; {
        obj[element['key_name']] = [null, [Validators.required]]
      });
  
      console.log("obj", obj)
      this.category.push(
        this.formBuilder.group(obj)   
      );
  
    }
  </code></pre>
  
  <p>What I want to archive is that based on 1st category selection all 2nd level category will be shown as a dynamic HTML dropdown who has their child category listing in the dropdown.</p>
  
  <p>Errors that I am getting:</p>
  
  <pre><code>ERROR Error: Cannot find control with path: 'categoryArray -&gt; 1'
  
  ERROR Error: Cannot find control with path: 'categoryArray -&gt; 1 -&gt; metal'
  </code></pre>
  
  <p><strong>EDIT:</strong>
  After setting up form control name, How can I set each newly created dropdown's value ? I need to fetch it from the db.</p>
  
  <p>Here is Stackblitz:
  <a href="https://stackblitz.com/edit/dyncamic-populating-dropdown" rel="nofollow noreferrer">https://stackblitz.com/edit/dyncamic-populating-dropdown</a></p>
  
  <p>Thanks in advance</p>