title: Iterate through a formgroup containing formarrays
body: <p>I am creating a dynamic model-driven form with the following structure :</p>
  
  <pre><code>export class AppComponent {
  
    data = {
      companies: [
        {
          company: "example comany",
          projects: [
            {
              projectName: "example project",
            }
          ]
        }
      ]
    }
  
    myForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.myForm = this.fb.group({
        companies: this.fb.array([])
      })
  
      this.setCompanies();
    }
  
    setCompanies() {
      let control = &lt;FormArray&gt;this.myForm.controls.companies;
      this.data.companies.forEach(x =&gt; {
        control.push(this.fb.group({ 
          company: x.company, 
          projects: this.setProjects(x) }))
      })
    }
  
    setProjects(x) {
      let arr = new FormArray([])
      x.projects.forEach(y =&gt; {
        arr.push(this.fb.group({ 
          projectName: y.projectName 
        }))
      })
      return arr;
    }
  }
  </code></pre>
  
  <p>Below is the model structure, in the Observable of which I am receiving the data from the back-end:</p>
  
  <pre><code>export class Companies{
  company : String;
  companyRegNo : String;
  projects : Project[];
  }
  export class Project{
  projectName : String;
  projectRegNo : String;
  }
  </code></pre>
  
  <p>I have some json data in my 'myForm' <code>FormGroup</code> variable, with information containing company and projectName. I need to make some updations in this json, yet have the original <code>myForm</code> json data available with me.</p>
  
  <p>Hence, I am creating another <code>FormGroup</code> variable <code>myForm2</code> and assigning <code>myForm</code> value to it :</p>
  
  <pre><code>myForm2: FormGroup;
  this.myForm2 = this.myForm;
  </code></pre>
  
  <p>Now, I want the <code>company</code> value to be replaced with <code>companyRegNo</code> value and <code>projectName</code> value to be replaced with <code>projectRegNo</code> value keeping the keys <code>company</code> and <code>projectName</code> remain as it is, in myForm2. </p>
  
  <p>I already have 2 methods, <code>getProjectRegNoFromProjectName()</code> and <code>getCompanyRegNoFromCompanyName()</code> available with me, which return the <code>projectRegNo</code> and <code>companyRegNo</code> on passing the <code>projectName</code> and <code>company</code> respectively. I need to call both these methods while iterating on myForm2.
  How can I now iterate the <code>myForm2</code> data itself so that I may update the assigned attributes and <code>FormArray</code> values as aforementioned?</p>