multiStepFormInstance is not getting injected into controller about angular-multi-step-form

[troch]

I don't have a live example, but just injected it here: http://blog.reactandbethankful.com/angular-multi-step-form/#/saving-data (https://github.com/troch/troch.github.io/blob/master/angular-multi-step-form/scripts/app.js#L143).

Are you certain you don't use 'stepCtrl' anywhere else in your app? The error you see is typical of the controller being instantiated outside the directive.

[rahul-cuelogic]

Hi @troch

Is it possible to change step from controller method ?

[troch]

A controller will only receive multiStepFormInstance if it is used by a <multi-step-container steps="..."></multi-step-container>. So you need to configure your steps with your controller on one of the steps, and let the directive instantiate them (it will provide them the multiStepFormInstance).

Is it possible to change step from controller method ?

I am not sure to understand your question.

[rahul-cuelogic]

Hi @troch

Here is my code, not sure what I am missing here
my store.html file is as follows in this file I am loading the steps by using the <multi-step-container> directive

<div class="wrapper-section">
  <div class="container" ng-controller="homeCtrl">

  <multi-step-container steps="storeSteps" on-cancel="$dismiss()" on-finish="$close()" search-id="'step'">

          <main step-container>



          </main>

    </multi-step-container>


  </div>
</div>

Here is my app.js file inside which I have defined homeCtrl like this:

app.controller('homeCtrl',['$scope', '$http', function($scope, $http) {


    $scope.storeSteps = [
                    {
                        templateUrl: '/app/modules/common-views/store/launch-setup.html',
                        hasForm: true,
                        controller: 'homeCtrl'
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/step-one.html',
                        hasForm: true
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/step-two.html',
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/step-three.html',
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/finish.html',
                    }

                ];

    $scope.addStore = function() {

    console.log('hello world');
    multiStepFormInstance.setActiveIndex(2);
    //console.log(multiStepFormInstance.getActiveIndex());
  }
}]);

Is it possible to change step from controller method ?

By this I mean on my first step (i.e. launch-setup.html) there is 'Add' button on click of which I will add a record and want to navigate to next step if the record is successfully added, if not, then show the error message. For this I have written addStore() method inside the controller.
I want to know is it possible to render step 2 from this addStore method defined in controller?

[troch]

Your code won't work, I am not sure what you want to do. But 'homeCtrl' cannot be a form step controller as well as the controller defining your steps. So you need two different controllers.

app.controller('stepCtrl', ['$scope', 'multiStepFormInstance', function ($scope, multiStepFormInstance) {
    $scope.addStore = function() {
         console.log('hello world');
         multiStepFormInstance.setActiveIndex(2);
         //console.log(multiStepFormInstance.getActiveIndex());
    };
});

app.controller('homeCtrl',['$scope', '$http', function($scope, $http) {
    $scope.storeSteps = [
                    {
                        templateUrl: '/app/modules/common-views/store/launch-setup.html',
                        hasForm: true,
                        controller: 'stepCtrl'
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/step-one.html',
                        hasForm: true
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/step-two.html',
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/step-three.html',
                    },
                    {
                        templateUrl: '/app/modules/common-views/store/finish.html',
                    }

                ];
  }
}]);

[rahul-cuelogic]

Hi @troch ,

I created separate controllers as you mentioned in above comment, I am still the getting the same errror

Error: [$injector:unpr] Unknown provider: multiStepFormInstanceProvider <- multiStepFormInstance <- stepCtrl
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=multiStepFormInstanceProvider%20%3C-%20multiStepFormInstance%20%3C-%20stepCtrl

[rahul-cuelogic]

Hi @troch ,
Do you have a sample example of injecting 'multiStepFormInstance' into controller? may be, I could refer that to see it in action and figure out what I am missing here

[rahul-cuelogic]

Thank you so much @troch ,

Are you certain you don't use 'stepCtrl' anywhere else in your app? The error you see is typical of the controller being instantiated outside the directive.

stepCtrl was getting instantiated from ng-controller directive in my HTML, I removed that it is working fine.

Again thanks a lot 👍