Ionic & Angular JS - How to do a multiple step form?

Question

I've search a lot in Google a solution for do a multiple step form in Ionic (In one view).

I want all data will be retrieved at end in only one submit button for my database (I use Firebase).

I don't found solution and I test a lot, but without success ... Thanks for your time !

EDIT : I've test a Slide solution, but the button next don't work ... This is my code.

HTML :






  
  
  L'événement
  
  
  
     
    
  
  
    
  




  
  
  Date/Heure

Controller JS:

myApp.controller('Step1Ctrl', ['$scope', 'Event', 'Auth', '$rootScope', '$state', '$firebaseArray', '$ionicSlideBoxDelegate', function($scope, Event, Auth, $rootScope, $state, $firebaseArray, $ionicSlideBoxDelegate) {

 $scope.slideNext = function() {

        $ionicSlideBoxDelegate.next();
    }

$scope.submitEvent = function(event) {

    var eventRef = new Firebase("https://myApp.firebaseio.com/Events");
    Event.add(event).then(function (data){ 
      $scope.event = [{userid : null, nameid: null, descriptionid: null, adressid: null, cpid: null, townid: null, startdateid: null, enddateid: null, starthourid: null, endhourid: null}];
     });

  }



  $scope.deleteEvent = function(index) {
    $scope.events.splice(index , 1);
  }

  $scope.auth = Auth;

    // any time auth status updates, add the user data to scope
    $scope.auth.$onAuth(function(authData) {
      $scope.authData = authData;
    });

    $scope.create = function() {
    $state.go('tabstep');
};
$scope.close = function() { 
     $state.go('tabdash'); 
};
}]

)

Service JS :

myApp.factory("Event", ["$firebaseArray", "$firebaseObject", function($firebaseArray, $firebaseObject) {
var eventRef = new Firebase('https://myApp.firebaseio.com/Events/');
var userRef = new Firebase('https://myApp.firebaseio.com/Users/');
var events = $firebaseArray(eventRef);

     var Event = {

         all: events,

         get: function (event){
          var eventInfo = $firebaseObject(eventRef);
          event.startdateid = new Date(event.startdateid);
          event.starthourid = new Date(event.starthourid);
                return $firebaseObject(eventRef.child('Events').child(userid));

              }
            ,
        add: function (event){
          var eventInfo = $firebaseArray(eventRef, userRef);
          event.userid = userRef.getAuth();
          event.startdateid = new Date(event.startdateid).toJSON();
          event.starthourid = new Date(event.starthourid).toJSON();
                return eventInfo.$add(event);
              }
       }
       return Event;

PS : I'm very interested by the Ng-show/hide solution .. An example will be welcome !

Thanks !

Sam Storie · Accepted Answer

Have you considered using some sort of state variable (like $step) to dynamically show/hide different form elements using ng-show or ng-hide?

I suspect you could still keep a single form element in your HTML, but use this variable to walk a user through multiple sets of form elements. As they work through the steps they'd be updating $scope variables required. The final submit button would then be shown only on the final step, and would be able to use all the variables set during the previous steps.

This isn't really an Ionic specific question, so this is vanilla Angular, but with an HTML template like this:


  Multi-step form demo (on step {{data.step}})
  
  
    
   
  
    
   
    
    
      Submit form
   

    Next

  

  Form data
  {{data.form}}

...and a controller that looks like this:

function ctrl($scope){
  $scope.data = {
    step: 1,
    form: {
      value1: undefined,
      value2: undefined,
      value3: undefined
    }
  }

  $scope.submit = function() {
    alert('form submitted');  
  }

  $scope.nextStep = function() {
    $scope.data.step += 1;
  }
}

...you can start to get what you're looking for. Obviously you'd clean up the code a bit, but this demonstrates the idea.

Here's a working codepen that shows this in action: http://codepen.io/sstorie/pen/vORoay

Ionic & Angular JS - How to do a multiple step form?

Answers (2)

Related Questions

Ionic &amp; Angular JS - How to do a multiple step form?

Answers (2)

Related Questions

Ionic & Angular JS - How to do a multiple step form?