Multi stage form handling using angularjs

Question

I have two forms in different tabs and i am storing the values in one common JSON object.

Now i am able to getting the first tab form values. If i click on the second tab 'continue' button, the values of the first tabbed form values getting blank.

controller.js

    $scope.custDetailsObj = {
          "personalDetails":{
            "firstname":"",
            "lastname":""
          },
          "Idproof":{
            "idtype": "",
            "idnum": "",
            "doi": ""
          }      
        };

$scope.continueBtn = function(){
      console.log($scope.custDetailsObj);
      $ionicTabsDelegate.select(1);
    };

Firt tab content

    <label class="item item-input">
        <span class="input-label">First Name:</span>
        <input type="text" data-ng-model="custDetailsObj.personalDetails.firstname" name="firstname" />                 
    </label>
     <label class="item item-input">
        <span class="input-label">Last Name:</span>
        <input type="text" data-ng-model="custDetailsObj.personalDetails.lastname" name="lastname">
     </label>
<button type="submit" class="button button-full button-positive" ng-click="continueBtn()">Continue</button>

Second tab content

    <label class="item item-input">
                <span class="input-label">ID Type:</span>
                <input type="text" value="" data-ng-model="custDetailsObj.Idproof.idtype" name="idtype"/>
              </label>  
              <label class="item item-input">
                <span class="input-label">ID Number:</span>
                <input type="text" value="" data-ng-model="custDetailsObj.Idproof.idnum" name="idnum"/>
              </label>
<button type="submit" class="button button-full button-positive" ng-click="continueBtn()">Continue</button>

you should show more code, are your two tabs from the same controller ? — t0mpl
– t0mpl, Commented Nov 6, 2015 at 4:12
two tabs are in same controller, how do i store all the data in one object — vishnu
– vishnu, Commented Nov 6, 2015 at 4:21

t0mpl · Accepted Answer · 2015-11-06 04:42:50Z

1

I think $ionicTabsDelegate.select(1); is refreshing your controller, so your data are lost, one way to keep your datas is to use a service

Example :

angular.module('yourmodule')
.service('Data', function() {
    var personalDetails;

    var Idproof;

    this.getPersonalDetails = function() {
        return this.personalDetails;
    }

    this.getIdproof = function() {
        return this.Idproof;
    }

    this.setPersonalDetails = function(personalDetails) {
        this.personalDetails = personalDetails;
    }

    this.setIdproof = function(Idproof) {
        this.Idproof = Idproof;
    }
});

then you use your service in controller and use the getters and setters

answered Nov 6, 2015 at 4:42

t0mpl

5,0553 gold badges34 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multi stage form handling using angularjs

controller.js

Firt tab content

Second tab content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

controller.js

Firt tab content

Second tab content

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related