在ionic v2中单击按钮时切换片段

Question

I'm trying to create multi page forms using segment. I tried searching for examples but couldn't find any.

This is how my multi page form looks like now,

My question is how can I switch to next segment on button click(in my case its the next button which should make the user go to next segment). Thanks in advance!

Answer 1

You can do something like this:

    <div [ngSwitch]="Segments">
        <div *ngSwitchCase="1">
            SEGMENT CONTENT
            <button ion-button (click)="Segments = 2">NEXT</button>
        </div>
        <div *ngSwitchCase="2">
            SEGMENT CONTENT
            <button ion-button (click)="Segments = 3">NEXT</button>
        </div>
        <div *ngSwitchCase="3">
            SEGMENT CONTENT
            <button ion-button (click)="Segments = 4">NEXT</button>
        </div>
        ...
    </div>

    <ion-segment [(ngModel)]="Segments">
        <ion-segment-button value="1">
            1 >
        </ion-segment-button>
        <ion-segment-button (ionSelect)="Segments = 2" value="2">
            2 >
        </ion-segment-button>
        ...
    </ion-segment>

And then use a formBuilder for validation and getting all the data from the segment fields. Hope it helps