Angular 4 Create Dynamic formArray inside array using reactive forms

Question

Here, we are creating dynamically form array's inside array.

Below is the sample structure of expected result given below.

{
  "optionsRadios": null,
  "Package_Title": null,
  "HotelData": [
    {
      "Htitle": "",
      "HDescription": "",
      "hotelStar": "",
"RoomData": [
    {
      "Hotel_Room_Type": ""
    },
    {
      "Hotel_Room_Type": ""
    }
  ]
    }
  ]

}

I want to create HotelData Dynamically, within that HotelData array i want to create RoomData array fields also dynamically.

I created HotelData fields by the following codes:

    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());
        }
    }

i followed #Rahul Singh answer but, I'm getting error like in browser TypeError: Cannot read property 'controls' of undefined — paruvelly Vishwanath
– paruvelly Vishwanath, Commented Sep 1, 2017 at 11:24

AVJT82 · Accepted Answer · 2019-02-08 06:54:23Z

7

You are on the right track, we just need to add some more code...

addRows need the form array RoomData, and here we also initially push an empty form group of room. If you don't want that, modify it.

addRows() {
  let group = this._formBuild.group({
    ...
    RoomData: this._formBuild.array([])
  });
  // push formgroup to array initially
  this.addRoom(group.controls.RoomData)
  return group;
}

addRoom looks like this:

addRoom(hotel:any) {
  let group = this._formBuild.group({
    Hotel_Room_Type: ['']
  })
  hotel.push(group)
}

addRoom is also the method we are calling from template when we want to add a new room to a hotel. Remember to pass the current hotel as parameter from template.

As for adding a new hotel, your addHotel stays the way you have it now.

Then over to your template, the relevant part should look something like this:

<div formArrayName="HotelData">
  <div *ngFor="let hotel of invoiceForm.get('HotelData').controls; let i = index" [formGroupName]="i" >
    <!-- form controls here -->
    <button (click)="addRoom(hotel.get('RoomData'))">Add Room</button>
    <div formArrayName="RoomData">
      <div *ngFor="let room of hotel.get('RoomData').controls; let j = index" [formGroupName]="j">
        <!-- form controls here -->
      </div>
    </div>
  </div>
</div>

Finally, here's a Demo: http://plnkr.co/edit/7tcLcnzALew3oKGenjwK?p=preview

edited Feb 8, 2019 at 6:54

answered Sep 2, 2017 at 5:55

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

paruvelly Vishwanath Over a year ago

Here,

<div formArrayName="HotelData">                     <div *ngFor="let hotel of invoiceForm.controls.HotelData.controls;let i = index" [formGroupName]="i"></div></div>

is placed as suggested by you but, here get an error like "Identifier 'HotelData' is not defined".

AVJT82 Over a year ago

Have you checked the plunker that your code match? That error is unfamiliar for me, never seen it before, so based on the error I cannot really help. Perhaps you can modify the plunker with your code, if you are able to reproduce the issue?

paruvelly Vishwanath Over a year ago

I followed your given code it's working fine development. But in Production am getting error like this Property 'controls' does not exist on type 'AbstractControl'.

paruvelly Vishwanath Over a year ago

Above issue has been cleared. But, how to remove RoomData in HotelData, i tried like this removeRooms(i: number,j: number,invoiceForm) { const control = <FormArray>this.invoiceForm.controls[RoomData]; control.removeAt(i); } give me any suggestions.

Mahesh Over a year ago

Thanks a ton. FormArray and FormGroup and indexing was irritating

|

Collectives™ on Stack Overflow

Angular 4 Create Dynamic formArray inside array using reactive forms

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related