title: Convert object into FormGroup with nested FormArrays in Angular Reactive Forms
body: <p>I'm getting very complex json object from backend which contains arrays as key values like this:</p>
  
  <pre><code>[
    id: 1
    persons: [
      {
        name: 'Name',
        property: [ ..... ]
      }
      .........
    ]
  ]
  </code></pre>
  
  <p>I need to fill this object into my Reactive Form. So in my ngOnInit function I initialize the form and get array data from service. Then I pass this data to 'convertToFormGroup' function to create this nested FormArrays from simple object. The problem with this function is that this works only one level deep. I'm afraid that api can change in future and I will need another FormArray inside FormArray? I think this is totally wrong approach? And this should be simpler to convert object with nested arrays into FormGroup with nested FormArrays. Do we have some existing function for that? I'm new to Angular so don't hesitate critic me.</p>
  
  <pre><code>ngOnInit() {
    this.form = this.fb.group({
      data: this.fb.array([]),
    })
  
    this.service.getData().subscribe(data =&gt; {
      const convertedData = convertToFormGroup(data);
      (this.form.get('data') as FormArray).push(convertedData);
    });
  }
  
  private convertToFormGroup(object) {
    const newObj = {};
    Object.keys(object).map(key =&gt; {
      if (Array.isArray(object[key])) {
        newObj[key] = this.fb.array([]);
        for(const value of object[key]) {
          newObj[key].push(this.fb.group(value));
        }
      } else {
        newObj[key] = object[key];
      }
    });
    return this.fb.group(newObj);
  }
  </code></pre>