title: Assigning Value to FormGroup and Push to FormArray - Reactive forms
body: <p>Consider the formgroup I have as below:</p>
  
  <pre><code>userDetail = new FormGroup({
     name: new FormControl(''),
     addresses:new FormArray([])
  })
  
  addressDetail: new FormGroup({
    city: new FormControl(''),
    country:new FormControl('')
  })
  </code></pre>
  
  <p>The response I get from API are like:</p>
  
  <pre><code>{
    name:"Gayathri",
    addresses:[{
                 city:"Chennai", 
                 country:"India"
                },{
                 city:"Mumbai", 
                 country:"India"
                }
  }
  </code></pre>
  
  <p>All I am trying now is to assign each object in addresses to addressDetail formgroup and push those formgroup to formarray. The below approach fails and am not sure why so. </p>
  
  <p>Approach 1: 
  Consider res is the object containing API response: </p>
  
  <pre><code>this.userDetail.patchValue(res) //addresses is blank
   res.addresses.foreach((address)=&gt;{
         this.addressDetail.patchValue(address);
         (&lt;FormArray&gt;this.userDetail.get('addresses')).push(this.addressDetail)
     })
   console.log(this.userDetail.value) //all the two records be city mumbai and country India
  </code></pre>
  
  <p>Approach 2: 
  Consider res is the object containing API response: </p>
  
  <pre><code>  res.addresses.foreach((address)=&gt;{
            (&lt;FormArray&gt;this.userDetail.get('addresses')).push(this.addressDetail) //assume formGroup is pushed to formarray
         })
   this.userDetail.patchValue(res) //contains addresses
  console.log(this.userDetail.value) //all the two records in addresses be city mumbai and country India
  </code></pre>
  
  <p>Please let me know what went wrong and how to resolve. </p>