title: Get formcontrolname of FormGroup in an FormArray
body: <p>I have a <code>FormGroup</code> with a <code>FormArray</code> that has 3 <code>FormControls</code>. I want to iterate trough the <code>FormArray</code> and display the values of each one in a form. But I'm stuck on what to put on the <code>FormControlName</code>.</p>
  <p>This is my <code>FormGroup</code>:</p>
  <pre><code>fg: FormGroup = new FormGroup({
      properties: new FormArray([])
    }); 
  </code></pre>
  <p>This is how I add the <code>FormControls</code> into my <code>FormArray</code>,<code>dataArray</code> is the data I get from my response:</p>
  <pre><code>let formArray = this.fg.get('properties') as FormArray;
      for(let property of dataArray){
        const userPropertyGroup = new FormGroup({
          user_id: new FormControl(&quot;&quot;, Validators.required),
          name: new FormControl(&quot;&quot;, Validators.required),
          value: new FormControl(&quot;&quot;, Validators.required),
        });
  
        formArray.push(userPropertyGroup); 
  </code></pre>
  <p>To set the values in the <code>FormArray</code>:</p>
  <pre><code> for(let i = 0; i &lt; dataArray.length; i++ ){
        formArray.controls[i].setValue({
            user_id: dataArray[i].user_id,
            name: dataArray[i].name,
            value: dataArray[i].value,
          })
      }
  </code></pre>
  <p>Now I want to iterate and display all the values in the form. With <code>{{property.value.name}}</code> I'm able to get the values of each property of the array but I'm stuck at the <code>formControlName</code>. What should go there?</p>
  <pre><code> &lt;form [formGroup]=&quot;fg&quot; &gt;
      &lt;table *ngFor=&quot;let property of fg.get('properties')['controls']&quot; class=&quot;full-width&quot;&gt;
          {{property.value.name}}
        &lt;tr&gt;
          &lt;td&gt;
            &lt;mat-form-field class=&quot;full-width&quot;&gt;
              &lt;input matInput formControlName=&quot;?????&quot; placeholder=&quot;User id&quot;&gt;
            &lt;/mat-form-field&gt;
          &lt;/td&gt;
  </code></pre>
  <p>I checked a lot of similar questions at StackOverflow but none of them helps. I also tried implementing this <a href="https://angular.io/api/forms/FormArrayName" rel="nofollow noreferrer">example from Angular docs</a>.  Any help is really appreciated! Thanks.</p>