Angular ui router, Multi Step Form validation and REFRESH

Question

I am using UI router, please see below snapshot

state('app.requistion', {
        url: "/requisition",
        templateUrl: 'order/customer-skills/tmpl/main_requisition.html',
        title: 'Requisition',
         abstract: true,
        resolve: loadSequence('ngTable', 'ngMap'),
        controller:'MainRequisitionCtrl',
        controllerAs:'mainReq',
        data: {
            module:'requisition'
        },
        ncyBreadcrumb: {
            label: 'Requisition'
        }
    }).state('app.requistion.create', {
        url: "/createRequisition",
        templateUrl: 'order/customer-skills/tmpl/customer_skills.html',
        title: 'Create Requisition',
        controller: 'CustSkillCtrl',
        controllerAs: 'custSkill',
        resolve: {
            jobTitles: function (CustSkillService) {
                return CustSkillService.fetchAllJobTitles();
            }
        },
        ncyBreadcrumb: {
            label: 'Create Requisition'
        }
    }).state('app.requistion.worklocation', {
        url: "/createRequisition/workLocations",
        templateUrl: 'order/work-locations/tmpl/workLocations.html',
        title: 'Select Work Locations',
        controller: 'WorkLocationCtrl',
        controllerAs: 'workLocation',
        resolve: {
            workLocations : function (WorkLocationService) {
                return WorkLocationService.fetchAllWorkLocations();
            }
        },
        ncyBreadcrumb: {
            label: 'Select Work Locations'
        }
    })

Now I have One form, which I put in main_requisition.html, and on clicking the wizard link on top u navigate from one page to another...

<form name="mainReq.Form" id="form" novalidate>
        <div id="wizard" class="swMain">
            <!-- start: WIZARD SEPS -->
            <ul>
                <li ng-click="mainReq.form.goTo(mainReq.Form, 1)">
                    <a ui-sref="app.requistion.create" ng-class="{'selected' : mainReq.currentStep >= 1, 'done' : mainReq.currentStep > 1}">
                        <div class="stepNumber">
                            1
                        </div>
                        <span class="stepDesc text-small"> 
                        Order Dates + Customer Skills </span>
                    </a>
                </li>
                <li ng-click="mainReq.form.goTo(mainReq.Form, 2)">
                    <a ui-sref="app.requistion.worklocation" ng-class="{'selected' : mainReq.currentStep >= 2, 'done' : mainReq.currentStep > 2}">
                        <div class="stepNumber">
                            2
                        </div>
                        <span class="stepDesc text-small"> Select Work Locations </span>
                    </a>
                </li>
                ...............................

            </ul>
            <!-- end: WIZARD SEPS -->
            <div ui-view class="fade-in-up"></div>
        </div>
    </form>

Now u can only move from step 1 to step 2, if form is valid. I implemented it like this...

 $rootScope.$on('$stateChangeStart', function (event, toState, toParams,
                             fromState, fromParams) {
                      ................
 //here canGoToStep is false if form is invalid         
 if(!canGoToStep) {

     event.preventDefault();
 }

Now problem comes in when I REFRESH the page on step on say STEP 2.....

1. I receive blank as canGoToStep is false and preventDefault() is fired.
2. If I remove the check I can see page 2 reloaded with worklocation but step1 is still invalid

3. When I print the following $log.debug(fromState) , $log.debug(toState); and $log.debug($state.current). I receive following output

   Object {name: "", url: "^", views: null, abstract: true}

   Object {url: "/createRequisition/workLocations", templateUrl: "order/work-locations/tmpl/workLocations.html", title: "Select Work Locations", controller: "WorkLocationCtrl", controllerAs: "workLocation"…}

   Object {name: "", url: "^", views: null, abstract: true}

What is the correct approach to handle REFRESH and why current state becomes null?

Answer 1

The current state is null because $state.current in context of stateChangeStart event returns the state from which you are trying to navigate. When you refresh the page there is no previous state. I would suggest you to check if current state is null(meaning that it is initial load) and if it is check which of the forms is valid and navigate to first of them. Or navigate to first of them by default. Something like this:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams,
                                 fromState, fromParams) {
                          ................
    if(fromState.name == ''){
       event.preventDefault();
       //go to first valid state or go to first state in the list
    }
}