title: Angular 5 build form array from JSON result
body: <p>I am having the following issue with Angular form arrays, I was wondering if someone could help me out as I am quite new with Angular?</p>
  
  <p>Apologies I cannot provide a plunker due to the complexity of the project (lots of dependencies and complex code), but I will do my best to provide as much detail as I can!</p>
  
  <p>I have a JSON response from a service call that contains a group of fields (called "myFields") such as: </p>
  
  <pre><code>0:
  name: "field1"
  1:
  name: "field2"
  </code></pre>
  
  <p>I am getting this response from a call to an API, and I need to build a form using the fields from the reponse. I am currently looping through this response and attempting to build a form array as follows:</p>
  
  <pre><code>constructor(private formBuilder: FormBuilder){
  
      this.myFormGroup = this.formBuilder.group({
          aliases: this.formBuilder.array([
          ])
      });
  
  }
  
  get aliases() {
      return this.myFormGroup.get('aliases') as FormArray;
  }
  
  getServiceFields(){
  
      *call to get fields and store in "myFields"*
      for (let item of myFields) {
          this.aliases.push(this.createGroup(item));
      }
  }
  
  createGroup(item): FormGroup {
      return this.formBuilder.group({
          name: new FormControl(item.name)
      });
  }
  </code></pre>
  
  <p>And in my view I have: </p>
  
  <pre><code>&lt;div [formGroup]="myFormGroup" class="example-form"&gt;
      &lt;div formArrayName="aliases" &gt;
      &lt;div *ngFor="let field of myFormGroup.controls.aliases.controls; 
      let i=index"&gt;
  
          &lt;mat-form-field&gt;
              &lt;input matInput placeholder="{{field.value.name}}"
              formControlName="{{field.value.name"}}&gt;
          &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The issue I am having is that nothing shows on the page and this is the error I see in the console window:</p>
  
  <p><a href="https://i.stack.imgur.com/a25V2.png" rel="nofollow noreferrer">Error: Cannot find control with path: 'aliases -> name'</a></p>
  
  <p>I will also attach a screenshot showing the structure of my FormGroup in the console window: </p>
  
  <p><a href="https://i.stack.imgur.com/eWOKy.png" rel="nofollow noreferrer">FormGroup structure</a></p>
  
  <p>Hopefully this is enough information, if additional details are required I can provide them. Anyone have an idea where I am going wrong? Thanks!</p>
  
  <p>Edit: I cannot hard code the formControlName (e.g formControlName="name") as I am looping through the list of controls in "aliases", this is why I am trying to use {{field.value.name}}</p>