title: Angular generate dynamic FormGroup with custom formControlName
body: <p>I want to create a dynamic formGroup based on json like this:</p>
  
  <pre><code>  const LIMITS: Limit[] = [
    {
      id: 'limit1',
      value: 1000,
      disabled: false
    },
    {
      id: 'limit2',
      value: 500,
      disabled: true
    },
    {
      id: 'limit3',
      value: 5000,
      disabled: true
    }
  ]
  </code></pre>
  
  <p>Using formArray from <a href="https://stackoverflow.com/questions/41288928/when-to-use-formgroup-vs-formarray">this</a> response works fine, but I will lost my <code>id</code> information which I need to match edited values. Is there way how to generate dynamic form with my custom <code>formControlName</code> name?
  <a href="https://stackblitz.com/edit/angular-pdgmdr" rel="nofollow noreferrer">Here</a> is stackblitz ecample based on <a href="https://stackoverflow.com/questions/41288928/when-to-use-formgroup-vs-formarray">this</a> response.</p>
  
  <p><strong>EDIT</strong></p>
  
  <hr>
  
  <p>I used approach with <code>FormGroup</code> w but on init I get an errors </p>
  
  <pre><code>Error: Cannot find control with path: 'limits -&gt; limit1'
  Error: Cannot find control with path: 'limits -&gt; limit2'
  Error: Cannot find control with path: 'limits -&gt; limit3'
  </code></pre>
  
  <p>I know that when inputs are 
  See <a href="https://stackblitz.com/edit/angular-teek5f" rel="nofollow noreferrer">this</a> stackblitz example.</p>
  
  <p><strong>EDIT</strong></p>
  
  <hr>
  
  <p>I have found solution by defining <code>limits</code> then used <code>setControl</code> in data subscription.</p>
  
  <pre><code> ngOnInit() {
      this.form = this.fb.group({
        limits: this.fb.group({})
      })
  
      this.limits$.subscribe((limits: Limit[]) =&gt; {
        this.form.setControl('limits', this.addLimits(limits));
      });
  
    }
  </code></pre>
  
  <p>See stackblity <a href="https://stackblitz.com/edit/angular-p7noaj" rel="nofollow noreferrer">example</a></p>