Is there some best practice for creating a form that spans multiple pages? I was doing this using a navigation controller with a “Next” button at the bottom of each page, but this seems to make it impossible to clear the form and the nav history and return to the beginning with a blank slate after hitting a “Submit” button on the final page. I’ve been googling for hours and trying everything I can find - $route.reload(), $ionicViewService.clearHistory(), $state.transitionTo(‘tabs.home’, {}, {reload: true, inherit: false, notify: true}) - and nothing I can find quite works. I end up navigating forward to the first page, rather than jumping back to it, so the form still contains the entered data and there’s a “Back” button at the top of my nav. I’m guessing the navigator view is not the smartest way to do this?
What you could do is use the slide-box to split the form up.
Thanks for the idea. This seemed like a really promising solution, but unfortunately the pages of the form are not all the same height, and the slidebox ends up adopting the height of the tallest slide, leaving a great deal of whitespace at the bottom of the others.
I’m using this structure (which may be incorrect, the correct nesting of content and views and such confuses me, because I’m easily confused):
<ion-view><ion-content><ion-slide-box><ion-slide>slide content...</ion-slide></ion-slide-box></ion-content></ion-view>
I’ve tried nesting the content inside the slide box, and even inside the slides, but this just makes everything stop rendering.
Try this
Ah-ha - that got me over the hurdle. Thank you so much for your help, I appreciate it!
Hi there. I have applied this to a registration form I am building but I would like to prevent users accessing the next slide in the sequence until form elements are filled in correctly. Is it possible to disable the slide swipe UI and use buttons for NextSlide() instead?
Yes this is possible.
It is stated in our docs.
http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/
You weren’t asking me, but I did it by adding these functions to my controller:
$scope.disableSwipe = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
$scope.slideNext = function() {
$ionicSlideBoxDelegate.next();
};
$scope.slideBack = function() {
$ionicSlideBoxDelegate.previous();
};
You can be more specific about which box to operate on by giving your box a delegate-handle and then finding it with $ionicSlideBoxDelegate.$getByHandle(). When I instantiate my slide box, I call the swipeDisable() function:
<ion-slide-box show-pager="false" ng-init="disableSwipe()">
For my “Next” buttons, I have this (the ng-click attribute is the important part):
<button class="button button-full button-light button-positive button-outline icon icon-right ion-chevron-right" ng-click="slideNext()">Next</button>
You can easily figure out how to make a “Back” button if you wanted, and you can use ng-show to not show the next button until your requirements are met.
Huh, I’ve been using $ionicSlideBoxDelegate for $getByHandle, but never noticed it had those functions. Instead, I’ve been using the active-slide attribute and binding it to a value on the controller. It’s actually been working very well.
But now this makes me wonder, is that not a good practice? Should I be using $ionicSlideBoxDelegate. slide / previous / next instead of active-slide?
< Thanks
I also got this to work. I was trying to emulate something like this but SlideBox has worked just fine. Using custom directives and validation to disable $ionicSlideBoxDelegate.next() worked great!
ng-show would be a nice finishing touch - thanks bkocik
Can You Please help me…as I am struck with similar problem…I have used a slide box to populate a form which is showing fields one in each slide.The content of this form is dynamic so I have used ng if to check its type and render form element in the ng repeat.But I am unable to bind or access the scope of this inputs from each slide…