title: Angular form group: cannot find control with unspecified name attribute
body: <p>I'm having a problem with my Angular app.
  I'm trying to create 3 forms.
  Here is my template:</p>
  
  <pre><code>&lt;div *ngFor="let item of formNames; index as i" &gt;
      {{formNames[i]}}
  &lt;form [formGroup]='formFields[i]'&gt;      
    &lt;label&gt;          
        Name:
       &lt;input type="text" [formControl]="formFields[i].name"&gt;
    &lt;/label&gt;      
     &lt;label&gt;
    All:
    &lt;input type="text" [formControl]="formFields[i].all"&gt;      
  &lt;/label&gt;
  &lt;label&gt;
     Done:
    &lt;input type="text" [formControl]="formFields[i].done"&gt;      
  &lt;/label&gt;
  &lt;label&gt;
    Ctrl:
    &lt;input type="text" [formControl]="formFields[i].ctrl"&gt;      
  &lt;/label&gt;
  &lt;label&gt;
    Rjct:
    &lt;input type="text" [formControl]="formFields[i].rjct"&gt;      
  &lt;/label&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that when the page loads, it renders only the first {{formnames[i]}}. Console says "ERROR Error: Cannot find control with unspecified name attribute".</p>
  
  <p>Here is the code I use to render FormGroups:</p>
  
  <pre><code>export class TableDataFormComponent {
    formFields: Array&lt;any&gt; = fields;
    formNames = FORMINPUTS;
    say = f; 
  }
  
  let f = function() {console.log(this.formFields); };
  
  const FORMINPUTS: Array&lt;string&gt; = [];
  
  TableHeaders.HEADERS.forEach((item) =&gt; {
    FORMINPUTS.push(item);
  });
  
  let fields: Array&lt;FormGroup&gt; = [];
  
  for (let i = 0; i &lt; FORMINPUTS.length; i++) {
      fields[i] = new FormGroup({
      name: new FormControl(''),
      all: new FormControl(''),
      done: new FormControl(''),
      ctrl: new FormControl(''),
      rjct: new FormControl('')
    });
  }
  </code></pre>
  
  <p>Here is the video of the problem: <a href="https://yadi.sk/i/4GnZpJLV38oWMg" rel="nofollow noreferrer">https://yadi.sk/i/4GnZpJLV38oWMg</a></p>
  
  <p>Stackblitz for some reason is not working for my project, but the source code is here: <a href="https://stackblitz.com/github/kulaska/Table-app/tree/adding_forms_branch" rel="nofollow noreferrer">https://stackblitz.com/github/kulaska/Table-app/tree/adding_forms_branch</a></p>
  
  <p>I don't understand why data renders after interacting with buttons or input elements. It somehow triggers creating of new FormGroup. 
  Obviously, I need all of them to be created at the same time, without interacting with DOM.
  Has anyone had the same issue? What do I do to solve this?
  I'd really appreciate your help</p>