CODEWITHSUNDEEP
angularjs
vishnu
vishnu

Reputation: 4599

Multi stage form handling using angularjs

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>

Upvotes: 0

Views: 94

Answers (1)

t0mpl
t0mpl

Reputation: 5025

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

Upvotes: 1

Related Questions