Complex form and "panel" forms



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-col class="formPanel">
          <button full class="listButton1" (click)="openPicker('group1')">
          <button full class="listButton2" (click)="openPicker('group2')">
      <ion-col class="pickerPanel" [ngSwitch]="pickerGroup">
    		<ion-list class="pickerGroup" *ngSwitchCase="'group1'">
    				<ion-label fixed>Label1</ion-label>
    				<ion-input type="text" value="value1"></ion-input>
    				<ion-label fixed>Label2</ion-label>
    				<ion-input type="text" value="value2"></ion-input>
    				<ion-label fixed>Label3</ion-label>
    				<ion-input type="text" value="value3"></ion-input>
    		<ion-list class="pickerGroup" *ngSwitchCase="'group2'">
    				<ion-label fixed>Label4</ion-label>
    				<ion-input type="text" value="value4"></ion-input>
    				<ion-label fixed>Label5</ion-label>
    				<ion-input type="text" value="value5"></ion-input>
    				<ion-label fixed>Label6</ion-label>
    				<ion-input type="text" value="value6"></ion-input>


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).


honestly i would just use a model object and pages
and then
this.nav.push(NextPage, modelObj);


Well, I don’t want the user to see a page change. What I need is just pushing the content of the page with a picker. Is it possible ?


then just do an *ngIf on a div when the value


good point, but is it possible to animate the show/hide of the picker div?
I’d want to slide it from/to the right.