Controlling an angular-multi-step-form from a controller (changing step index) about angular-multi-step-form

[thirionjwf]

Here is the relevant code snippets:

.controller('MyCtrl', function ($scope, $state, AuthService, $multiStepForm) {
    $scope.reset = function() {
        $scope.model = {};
    }

    $scope.logout = function () {
        $multiStepFormInstance.setActiveIndex(1);
        AuthService.logout();
        $state.go('login');
    };

   ....
})

<ion-view view-title="StepsTab" name="step-tabs-view">
    <ion-nav-buttons side="right">
        <button class="button icon ion-log-out button-stable" ng-click="logout()"></button>
    </ion-nav-buttons>

    <ion-content class="padding">
        <multi-step-container steps="steps">
            <header>
                <div id="status-buttons" class="text-center">
                    <a ng-class="$getActiveStep().title == 'Step1' ? 'active' : ''"><span>1</span> Step 1</a>
                    <a ng-class="$getActiveStep().title == 'Step2' ? 'active' : ''"><span>2</span> Step 2</a>
                    <a ng-class="$getActiveStep().title == 'Step3' ? 'active' : ''"><span>3</span> Step 3</a>
                </div>

                <div class="stepHeading">
                    {{$getActiveStep().title}}
                </div>

                <div style="{{$isLast() ? 'display: none' : ''}}">
                    <br>
                    <button ng-disabled="$isFirst()" class="button button-small button-stable ion-chevron-left" ng-click="$previousStep()">
                        Previous
                    </button>
                    <button ng-disabled="$isLast() || ($getActiveStep().hasForm && !$getActiveStep().valid)" class="button button-small button-stable icon-right ion-chevron-right" ng-click="$nextStep()">Next
                    </button>
                </div>

                <div style="{{$isLast() ? '' : 'display: none'}}">
                    <br>
                    <button class="button button-small button-stable" ng-click="reset(); $setActiveIndex(1)">Done
                    </button>
                </div>
            </header>

            <br>

            <main step-container></main>
        </multi-step-container>
    </ion-content>
</ion-view>

[troch]

Hi @thirionjwf,

You are not doing anything wrong. You cannot inject multiStepInstance outside the directive because it is not available application wide (it is specific to that instance).

Currently it is not possible to control a multiStepForm instance from outside the directive. I can work on a solution, however from an application perspective I would encourage you to destroy the multiStepForm instance and create a new one rather than trying to go back to step 1 (which is not a proper "reset").

You can simply destroy the directive by forcing a reload of your view. That would reset the multi-step form.

[thirionjwf]

Thank you. I assume you refer to something like:

$scope.reloadRoute = function() {
$route.reload();
}

which will reload the current route. Or would the form instance only get destroyed on a full refresh, i.e.:

$scope.reloadRoute = function() {
$window.location.reload();
}

Great plugin. Works very well.

[troch]

A route reload will be enough, no need to refresh / reload the page. Not sure how do to so with <ion-view/>. It might involve $route if based on ngRoute or $state if based on ui-router.

[thirionjwf]

Thanks. Much appreciated. You can close the "issue".

[troch]

👍