title: Angular 4 Create Dynamic formArray inside array using reactive forms
body: <p>Here, we are creating dynamically form array's inside array.</p>
  
  <p>Below is the sample structure of expected result given below.</p>
  
  <pre><code>{
    "optionsRadios": null,
    "Package_Title": null,
    "HotelData": [
      {
        "Htitle": "",
        "HDescription": "",
        "hotelStar": "",
  "RoomData": [
      {
        "Hotel_Room_Type": ""
      },
      {
        "Hotel_Room_Type": ""
      }
    ]
      }
    ]
  
  }
  </code></pre>
  
  <p>I want to create HotelData Dynamically, within that HotelData array i want to create RoomData array fields also dynamically.</p>
  
  <p>I created HotelData fields by the following codes:</p>
  
  <pre><code>    export class AddPackageComponent implements OnInit {
      ngOnInit() {
              this.invoiceForm = this._formBuild.group({
      Package_Title: [],
                  HotelData: this._formBuild.array([this.addRows()])
      })
      }
      addRows() {
              return this._formBuild.group({
                  Htitle: [''],
                  HDescription: [''],
                  hotelStar: ['']
              });
  
          }
  addHotel() {
              const control: FormArray = this.invoiceForm.get(`HotelData`) as FormArray;
              control.push(this.addRows());
          }
      }
  </code></pre>