Dynamic form

Ionic Framework ionic-v3
1

I am trying to create a dynamic form which values are accessible as a object.

This is what i was trying to do in the template:

        <form>
            <ion-list *ngFor="let floor of floors let fi = index">
                <h2>Floornumber {{fi}}</h2>
                <ion-item>
                <ion-label>Floorname</ion-label>
                <ion-input type="text" [(ngModel)]="floor.naam" name="naam_{{fi}}"></ion-input>
                </ion-item>

                <div *ngFor="let room of rooms let ri = index">
                    <ion-item>
                        <ion-label>Roomtype</ion-label>
                        <ion-input type="text" [(ngModel)]="room.naam" name="naam_{{fi}}_{{ri}}"></ion-input>
                    </ion-item>
                </div>

                <button ion-button color="primary" (click)="addroom(fi)">Add room</button>
            </ion-list>

            <button ion-button full color="primary" (click)="addfloor()">Add floor</button>

FLOORS: {{floors | json}}
ROOMS: {{rooms | json}}

This is (a short version) of what i have in the .ts file:

rooms = [{}];
floors = [{}];


addroom(nummer){
    //this.floors[nummer]['rooms'] = ({});
    this.rooms.push({});
}
addfloor(){
    this.floors.push({});
}

At the moment i get 2 arrays with objects of data; but u would like to create something like this:
FLOORS: [
{
“naam”: “Zolder”,
“kamers”:
{
“naam”: “toilet”
},
{
“naam”: “slaapkamer”
},
{
“naam”: “badkamer”
}

}
]

2

I’m going to make a couple of assumptions, and sorry if they’re wrong:

  • “kamer” means “room”
  • each floor has several rooms

In my experience, <ion-list> does not like having intervening DOM elements between it and its <ion-item>s, which is why your <div> is gone.

floors = [
    {
      "naam": "Zolder",
      "kamers": [
        {"naam": "toilet"},
        {"naam": "slaapkamer"},
        {"naam": "badkamer"},
      ]
    }
  ];

<ion-list *ngFor="let floor of floors; let fi = index">
    <ion-item>
      <ion-input [(ngModel)]="floor.naam" [name]="'floor' + fi"></ion-input>
    </ion-item>
    <ion-item *ngFor="let room of floor.kamers; let ri = index">
      <ion-input [(ngModel)]="room.naam" [name]="'floor' + fi + 'room' + ri"></ion-input>
    </ion-item>
  </ion-list>