Hi,
I need to create a complex form (more than 50 input fields!).
My idea is to crate a simple page displaying grouped labels & values of this form in “list” structure, each block being a button to open a “panel form”.
Ideally, when the user taps a group of infos, a panel is swipping from the right, displaying the corresponding inputs for the group.
When he has finished editing the group values, he taps on a “ok” button, and then the “panel form” swipes back to the right, updating group of values in the main form.
Don’t know if it’s clear…
I imagine a structure like this:
<ion-content>
<ion-col class="formPanel">
<ion-list>
<button full class="listButton1" (click)="openPicker('group1')">
<ion-row><ion-col>Label1</ion-col><ion-col>Value1</ion-col>
<ion-row><ion-col>Label2</ion-col><ion-col>Value2</ion-col>
<ion-row><ion-col>Label3</ion-col><ion-col>Value3</ion-col>
</button>
<button full class="listButton2" (click)="openPicker('group2')">
<ion-row><ion-col>Label4</ion-col><ion-col>Value4</ion-col>
<ion-row><ion-col>Label5</ion-col><ion-col>Value5</ion-col>
<ion-row><ion-col>Label6</ion-col><ion-col>Value6</ion-col>
</button>
...
</ion-list>
</ion-col>
<ion-col class="pickerPanel" [ngSwitch]="pickerGroup">
<ion-list class="pickerGroup" *ngSwitchCase="'group1'">
<ion-item>
<ion-label fixed>Label1</ion-label>
<ion-input type="text" value="value1"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Label2</ion-label>
<ion-input type="text" value="value2"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Label3</ion-label>
<ion-input type="text" value="value3"></ion-input>
</ion-item>
</ion-list>
<ion-list class="pickerGroup" *ngSwitchCase="'group2'">
<ion-item>
<ion-label fixed>Label4</ion-label>
<ion-input type="text" value="value4"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Label5</ion-label>
<ion-input type="text" value="value5"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Label6</ion-label>
<ion-input type="text" value="value6"></ion-input>
</ion-item>
</ion-list>
<button>Cancel</button>
<button>Ok</button>
</ion-col>
</ion-content>
When the user taps on “button1”, I want to display “pickerGroup1” (slide from right to left), covering the main form.
When the user taps “ok” or “cancel” butons, I want to hide “pickerGroup1” (slide to right), discovering the main form.
What would be the best way to accomplish that?
I already tried with “slides”, but it doesn’t work as expected (not scrollable, and I don’t want the user to be able to swipe by himself: only by clicking on buttons).