How to prevent losing data when moving from one state to another in multi-step form?

Question

I am new to web programming and especially to AngularJS. So maybe my question will seem naive to some of you.

I'm developing a single page application using angular-ui-router. I have created a multi-step form that contains 3 states:

(function () {
"use strict";
angular.module("sensorManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])

    .config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterPorvider) {
        $urlRouterPorvider.otherwise("/Sensor/Home");

        $stateProvider
          .state("MultiStepForm", {
              url: "/Sensor/MuiltyStepForm",
              templateUrl: "/app/MultiStepForm/MuiltyStepForm.html",
          })

         .state('MultiStepForm.step1', {
             url: '/step1',
             templateUrl: '/app/MultiStepForm/FormStep1.html'
         })
         .state('MultiStepForm.step2', {
             url: '/step2',
             templateUrl: '/app/MultiStepForm/FormStep2.html'
         })
         .state('MultiStepForm.step3', {
             url: '/step3',
             templateUrl: '/app/MultiStepForm/FormStep3.html'
         });
    }]);
})();

Here is the HTML code:

    <!-- form.html -->
<div class="row">
    <div class="col-sm-8 col-sm-offset-2">

        <div id="form-multiple-step">

            <div class="page-header text-center">

                <!-- the links to our nested states using relative paths -->
                <!-- add the active class if the state matches our ui-sref -->
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active" ui-sref=".step1"><span>STEP1</span></a>
                    <a ui-sref-active="active" ui-sref=".step2"><span>STEP2</span></a>
                    <a ui-sref-active="active" ui-sref=".step3"><span>STEP3</span></a>
                </div>
            </div>

            <form id="single-form">

                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </form>            
        </div>
    </div>
</div>

As you can see I have 3 states and each state has it's own view. The views have multiple elements (textboxes and checkboxes).

When the user enters some data for the STEP1 view and moves to the next step (STEP2 or STEP3) then at some point goes back to STEP1 all data is deleted. I checked with fiddler and can see that when I move from one state to another a call is made to the server and a new view generated.

My question is how can I prevent the lose of data when I move from one state to another? Do I have to use caching? Or maybe there is another way to prevent server calls and keep the data alive until the submit button clicked.

Use a service or a parent state. – Lucian Aug 04 '15 at 08:23 — Lucian, Aug 04 '15 at 08:23

score 2 · Answer 1 · answered Aug 04 '15 at 08:49

When you feel you have to save data across your controllers in your app. you should use a service.

app.factory('sharedDataService',  function ($rootScope) {

    console.log('sharedDataService service loaded.');
    // do something here that can be shared in other controller

});


//pass this service in your controller to use it there
app.controller('Controller2', ['$scope', 'sharedDataService', function ($scope, sharedData) {

    console.log('Controller2 controller loaded.');
    //get data from shared service

}]);

find a useful Fiddle here

Cheers if it helps!

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

I think what you need to do is share you $scope between the parent and child stats. here is the stackoverflow post with good example. https://stackoverflow.com/a/27699798/284225

edited May 23 '17 at 12:15

Community

1
1

answered Aug 04 '15 at 09:36

vijay shiyani

766
7
19

How to prevent losing data when moving from one state to another in multi-step form?

2 Answers2