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.....

I receive blank as canGoToStep is false and preventDefault() is fired.
If I remove the check I can see page 2 reloaded with worklocation but step1 is still invalid
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?

Yevgeniy.Chernobrivets · Accepted Answer · 2016-04-12 18:00:43Z

0

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
    }
}

answered Apr 12, 2016 at 18:00

Yevgeniy.Chernobrivets

3,1942 gold badges15 silver badges14 bronze badges

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

6 Comments

AVI Over a year ago

Thanks for your help!!! It works, I sent the user to default first state. I was wondering what is it correct practice for hard browser refresh for a single page application. in our application, say a user is on page 3 [having successfully completed page 1 and 2] and press a REFRESH, should I prevent the default event and just refresh the services/data for page 3 only or REFRESH the complete page, like it happening now.

Yevgeniy.Chernobrivets Over a year ago

Sorry, i do no quite understand what do you mean by "refresh the services/data for page 3 only refresh the ".

Yevgeniy.Chernobrivets Over a year ago

What do you mean by prevent default for REFRESH? I don't think that you can stop user from pressing F5.

AVI Over a year ago

TO prevent default refresh stackoverflow.com/questions/25040252/… var windowElement = angular.element($window); windowElement.on('beforeunload', function (event) { // do whatever you want in here before the page unloads. // the following line of code will prevent reload or navigating away. event.preventDefault();

AVI Over a year ago

What I mean REFRESH services is - if say I am on page 3 and it required assignments objects from back-end on load[navigation to this page]. Should I just fetch just these rather then starting from scratch and re-creating angular app?

|

Collectives™ on Stack Overflow

Angular ui router, Multi Step Form validation and REFRESH

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related