Complex form and "panel" forms


#1

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


#2

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


#3

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 ?


#4

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


#5

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.