troch / angular-multi-step-form Goto Github PK

View Code? Open in Web Editor NEW

144.0 144.0 44.0 161 KB

An angular module for creating multi step forms / wizards

Home Page: http://troch.github.io/angular-multi-step-form

License: ISC License

JavaScript 100.00%

angular-multi-step-form's People

Contributors

Stargazers

Watchers

Forkers

bartekmis webapps4u austbot portokallidis jackwangcumt nyxc miwillhite rajesh-frontendengineer jagdeepsingh91 arashbi theatlasroom doc82 pusherman csmithmedia naturalconan muffadalis valexiev juneman apuyou sauminkirve msmedubbs diegochavez jdiss rdzidziguri wangmx928 jotamiller viplov11 solicite dokuboyejo juliender alopezsanchez alterago manasapaskon wiserv-ued pvk2631995 calvinsterling twanvermeulen magattetop developeramarish siddmegadeth paul-taiwo mithila26 iq-scm

angular-multi-step-form's Issues

Browserify support

Publish in npm registry to support browserify

How do style search-id.

Hi,

How can you style the search-id to be something like this,

Is there any demo?

Hello,

Would you be so kind to share some demo(examples) to show us how it looks.
Sorry, but I didn't find any examples(I mean ready to use multi-steps wizards) built on top of this project.

Thanks!

Support both a header and a footer

This would make the component more flexible.

As an example, see:
https://material.angularjs.org/latest/#/api/material.components.gridList/directive/mdGridTile
and
https://material.angularjs.org/latest/#/api/material.components.card/directive/mdCard

<multi-step-container>
    <multi-step-header>
    </multi-step-header>
    <multi-step-content>
    </multi-step-content>
    <multi-step-footer>
    </multi-step-footer>
</multi-step-container>

or simply

<multi-step-container>
    <p>content</p>
    <multi-step-footer>
    </multi-step-footer>
</multi-step-container>

Get title of next step

This module is really useful, thanks.

I'm just struggling to get the title of the next and previous steps in a similar way as you do for the active step i.e. $getSteps().title

Is there a simple way?

Thanks again

Steps Controller Not working

Hi,

Each steps, controller not working ( Am setting $rootScope value from the ctrl ,its not functionalable)

app.controller('Step1Ctrl', function ($scope, multiStepFormInstance,$rootScope) {
$rootScope.isJoinStep = false;
});

may we have to add setStep function

i think in some case you have to set wich step gonna be showen to user

formStepValidity: I am having issues implementing this directive

I have a 4 step form. I would like to use this directive for validating the current step before the user moves onto the next, but am confused on how to properly implement it.

Do I wrap <main step-container></main> in a form or have 4 separate form tags for each step within the step template?

I currently have it within each step, but when I {{$getActiveStep().valid}} I get a blank and no value is returned.

Is it possible to disable and enable a step from controller ?

Hi,

Lets say we have 4 steps, and want only one step to be enable at a time, so is there any method exposed to acheive it ?
Is it possible to disable and enable a step from Controller ?

Support controller as or bindToController

It would be nice to support the controllerAs syntax (or set bindToController on the directive) so that you do not have to use $scope in controllers.

There is no css file?

I can't find the stylesheet file for the classes used in the examples.

Integration with ui-router

Hi,

Thanks for the good work!

i was wandering if it's possible to have an integration with ui-router or something ...

having the back-button, the got to the url,... working could be a really cool enhancement

what do you think?

Finish called on destroy instead of cancel

I have a multystep container within another directive which works perfectly till i try to destroy parent container. when parent container is destroyed, instead of calling cancel it calls onFinish which makes it usless because every time i try to close drawer onFinish is called which results in API call. is that normal should not finish be called explicitly? why is it always calling finish even if parent container gets destroyed without finishing wizard?

Still facing challenges with angular-multi-step-form and materialize modal

Can you please share with me how i can explicitly initialize angular-multi-step-form to the first step when i open the modal

Programatically move to next step

Great project!

I was just wondering if you were able to provide an example of how to programatically move to the next step?

I'm trying to achieve something like this:

<button ng-click="submit()">Submit</button>

$scope.submit = function() {
  MyService.postData()
    .then(function() {
      // Go to next form step
    })
  ;
};

Many thanks!

Possible to have a full working example ?

Hi Sir,
Congratz with the development of this component. I a newbie related to Angular, and I tried to make your component working, but I can't succeed.

Can I ask you to give me more details about the index.html and the JS file I have to use ?
(more specific, please tell me which scripts I've to include, and I hope you can give me an example of the angular file as well...

Thanks in advance !
Kind regards,

Johnny Driesen

Angular Can't inject multiStepFormInstance

Hey guys,
Everything is working fine in my app with multistepform, but when I try to put the multiStepFormInstance reference on controller, the injector throws an error.

Error: $injector:unprUnknown Provider
Unknown provider: multiStepFormInstanceProvider <- multiStepFormInstance <- FormController

Am I missing something?

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

Hi there,

I am trying to control a multi-step form from a controller. In my app a user logs in and then inside a tab view, a multi-step form is presented on one of the tabs. When user logs out with a button that is outside the multi-step-container directive, I am not able to change the step back to step 1 using $setActiveIndex(1). Hence the reason to want to change the step back to step 1 inside my logout function in the controller.

Is there a way to call $setActiveIndex(1) from inside my controller? I tried adding $multiStepForm and multiStepForm as dependencies in my controller, but when I try to use it, it is undefined. I see there is a factory, but can this be used inside a controller? I must be doing something wrong here.

Thanks in advance!

Backdrop remains after modal is closed

Modal-backdrop is not hidden after you close the modal.
http://blog.reactandbethankful.com/angular-multi-step-form/#/inside-modal

Animation & Search-ID

Thank you for sharing a such a useful library! I was curious if you had any ideas around using the transition animations in conjunction with the step URL parameter. I can get either to work separately, but once I add that search-id setting then the transition animations disappear.

explanation about $dismiss()

Hi i was implementing the inside a modal example though for the modal i was using materialize modal. everything seems to be working fine except on the implementation of the cancel button. issue is when i open up the modal again it shows the last step before i closed it. The previous step also stopped working and remains on the final step.

Validation on single form with multiple steps

Hi, me again, sorry!

I'm having an issue with the validity of the form between steps. I'd like to use only one form tag throughout multiple steps and check for validity of required fields between each step.

I'm defining the form tags within the multi-step-container element like so:

<form name="formName" form-step-validity>
            <main step-container></main>
</form>

For this reason, the validity of the form is false until all required fields are filled out throughout the entire form within each step. I thought about checking if the form is valid through ng-model validation then setting the validity of the step but this only works if I include the form tags within each step individually.

I don't know if my method is recommended but at the end of the form I just want one object with all the data from each step. Is this possible?

Cheers

Next and previous titles not working as intended

Sorry to reopen this but after much experimentation I'm still not achieving the desired outcome.

I am using the following code for next and previous buttons to show the title of the respective pages alongside the button:

<strong ng-bind-template="{{$isFirst() ? null : $getSteps()[$getActiveIndex() - 1].title}}"></strong>

<strong ng-bind-template="{{$isLast() ? null : $getSteps()[$getActiveIndex() + 1].title}}"></strong>

However this does not have the desired outcome. I have created an example array of steps whose titles are numbers from 1-6 to see what is going on.

When the page initially loads I see:
Next: 3 (where this should be 2)

Then as I click next through the steps I see:
Previous: 2, Next: 4 (should be 1,3)
Previous: 3, Next: 5 (should be 2, 4)
Previous: 4, Next:6 (should be 3, 5)
Previous: 5, Next: blank/null (should be 4, 6)
Previous: 6, Next: null (should be 5, null)

How can I intercept correctly the next event on each step?

Hi there, how can I intercept correctly the next event on each step? I see there's onStepChange() callback but I can't get how it works. Should I provide an onStepChange function in-scope for each controller involved in the multistep form?

Using ControllerAs for child scope controllers

Is it possible to have a controller which does not take $scope but use ControllerAs feature so that istead of using
function someController($scope, multiStepFormScope) { $scope.somedata = 'value'; }

i could use
function someController(multiStepFormScope) { var vm = this; vm.somedata = 'value'; }

and inside step HTML i could refer to it in the following way.

<input type="number" style="display: none" ng-model="vm.contactList.length" min="1" required />

not able to add dynamic steps

im not able to add dynamic steps to the steps array

Broken examples?

Hello,

I get some JavaScript errors and the examples are not working correctly. The HTML and JavaScript-Tabs are empty (I use chrome).

TypeError: Cannot read property 'configure' of undefined
at Object.$get (http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js:6:518)
at Object.e as invoke
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:38:110
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:36:13)
at Object.e as invoke
at x.instance (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:76:79)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:59:85
at q (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:7:428)
at M (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:59:69)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js:51:409)

Can not use inside custom service

`(function () {
'use strict';
angular.module('PcoreManager').controller('marketConfigWizardCtrl', demoCtrl);

demoCtrl.$inject = ['$scope', 'close'];

function demoCtrl($scope, close) {
    var vm = this;
    vm.steps = [{
        templateUrl: '/Template/marketconfig/wizardStartForm',
        title: 'basic data collection',
        isolatedScope: true
    }];
    vm.startWizard = function () {
        vm.wizardConfirmed = true;
    }
    vm.close = function () {
        close("true");
    }
}

})();'

<multi-step-container steps="vm.steps"> <step-container></step-container> </multi-step-container>

Dynamic Add Step

Is it possible to add new steps on the fly? thanks

Scroll to top on view change

I have a 4 stage form, two of the sections are a little longer than the viewport height. So when a user scrolls down and clicks next, the next form stage is visible partially scrolled. Is it possible to scroll to the top of the form when the user clicks next?

I love this directive, but that is the only thing I am not able to accomplish.

The transition animation doesn't feel right

When you move from one step to the other, the old step gets dropped to the bottom instead of sliding to the left as the new step slides in.

Is this a bug?

on-cancel Callback

Firstly great work awesome library. having challenges with on-cancel callback returning error TypeError: Cannot use 'in' operator to search for 'cancel()' in cancelled

I recently upgraded my angular to 1.4.8 and if i use 1.3.16 everything is working fine, please help

Access $nextStep() in controller function

Hi,

I'm wondering if it's possible to trigger the $scope.$nextStep() and other step functions inside the controller. When I do this it complains that it is undefined. I've tried injecting in various step scopes etc but it doesn't seem to help.

On of my use cases for this would be to write generic next and back functions that can be embedded in a partial for a menu that can be used across different types of multi step forms. Then I would define different step flows by looking up the step number and figuring out the next step base on either some variables in the step config or something like that.

If I can figure out how to call $nextStep in the controller triggered by a wrapping function, I think I'll be able to figure the rest out! Many thanks on your great work with this module it's awesome.

E.g.

myApp.controller('AddController', ['$scope', function($scope) {
    init();

    function init() {
        $scope.model = {};

        $scope.steps = [{
            templateUrl: 'step1.html',
            title: 'asdf'
        }, {
            templateUrl: 'step2.html',
            title: 'qwer'
        }, {
            templateUrl: 'step3.html',
            title: 'zxvc'
        }];
    }

    $scope.selectPerson = function(person) {
        $scope.model.person = person;
        $scope.$nextStep();
    };
}]);

In the view:

...
<div class="peoplelist">
    <div ng-repeat="person in peopleList|filter:search" class="person" ng-click="selectPerson(person); $nextStep();"> /* I don't want to have to call $nextStep() here, and have it trigger by the selectPerson() method */
</div>
...

Get validation of forms in different steps

Ok, here's the deal, im not being able to see if the forms in the other steps are valid or not.

For example, i'm in the first step and i wanna see if all the other step's forms are valid without going to those steps.

I tried to envolve the whole multi-step-container in only one form, didnt work.
I tried to use the $getSteps function, it indeed returned all the steps, but returned the valid attribute false for all of them, even if some of them are correctly valid.

Is this possible or i have to create a custom directive to do this? Thanks in advance.

Reuqest for simple

This is not actually issue i just got stacked about implementing validation in multi step form. is there any good example of how to implement this so that next previews is enabled based on validation and inputs get appropriate validation visual? i tried to wrap everything in

tah but angular validation does not work in this case.

Navigation

Hi,

Can I send for any state, for example through state of the index? Not only have the next and previous behavior.

Thanks

Dynamically appending steps on form element click

Hi, So I am having a little difficulty here, what I have is a multi step form that contains questions with multiple 'GoTo's' attached to them. What I am hoping to achieve is that when a user clicks on a button that has goto's set to append the relevent steps to the $scope.sections array (which is the scope var that builds the steps).

Is this possible, if not is there any work around that might help?

<multi-step-container steps="sections" on-finish="finish($getActiveStep())" initial-step="step" search-id="'step'">
        <step-container></step-container>
<multi-step-container>

I thought that I could just push to the array, but that doesn't seem to work:

Section.generateStepFromSection(dependentSection).then(function(response) {
    $scope.sections.push(response);
});

Add more steps dynamically?

I could not find a way to add more steps dynamically. I presume that we inject the multiStepFormInstance to get steps array and add more steps using that array. However, angular returns me injection error when I try to inject multiStepFormInstance to my controller.

Thanks for your support.

Regards.

on-step-change callback method ussage

on-step-change="vm.onStepChange()" this is my of form and in a parent controller i get this method invoked whenever step changes, but the problem is that it does not take any parameters and in a parent controller (view of this controller includes directive for multi step form). there is not way to learn on which step form is currently on. is there any way i can access this information in the parent controller? maybe method could take argument which includes curent step next step and previews step as a argument object values?

unresolved multiStepFormInstance promise is user navigates away from form before finish()

If the user does not complete a form and just navigates away from the form without hitting the "finish()" method the multiStepFormInstance promise is never resolved.

This was causing "TypeError: Cannot read property 'template' of undefined" when leaving a form and going through a form with more steps.

$scope.$on('$destroy') not called on the very last step

for every step i have this implemented so i save isolated scope data into the wizard global Context and this enables easy navigation back and forward, but the issue is that whenever i am on the very last step of the wizard and finish is triggered it does not call $scope.$on('$destroy') on that step which means its context can not be saved.

Going to previous step resets form validity to false

Hi,

I have a form in a step which performs calculations. Based on the calculations I use $scope.$setValidity() function to set it to true or false. This works fine for the next button. But when I click on previous it resets the validity. I have tried to rerun the script on page load but it it seems the values set in the script are ignored. Is there a way to preserve the validity of previous form?

Thanks

Can it support check required fields on each step form

It didn't mention how to check the required fields.
And it's should be a basic feature
Any idea?
thanks

multiStepFormInstance is not getting injected into controller

var store_module = angular.module('store', [
    'app.config',
    'flash',
    'multiStepForm'
  ]);


store_module.controller('myStore', ['$scope','multiStepFormInstance', function($scope, multiStepFormInstance){

  $scope.addStore = function() {

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

I have a multi step form, in the first step I am asking some user input and before moving to next step I want to do some action with user provided input, first step has 'add store' button on it's click I am calling the addStore function, here inside this function I want to move user to next step only if store gets added. For this I require multiStepFormInstance with which help I can set activeindex as the desired step index. However I keep getting following error :

error: [$injector:unpr] Unknown provider: multiStepFormInstanceProvider <- multiStepFormInstance <- myStore

what's the correct way to inject multiStepFormInstance into the controller, am I missing something here?
Is is possible to change step from controller method ?

Support nav pills

Hello,

would be nice to have the steps on top like here: http://www.bootply.com/sethfam/Ol5FB9IfJF (next to the navigation buttons like it is)

regards

Uncaught ReferenceError: exports is not defined

Hi,

Why I'm getting this error? How I setup the angular-multi-step-form on may AngularJS App?

Thanks

Gulp Depdendency Issue

I'm getting this error when trying to install the package in my project via npm:

npm ERR! notarget No compatible version found: gulp@'undefined'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.7","0.0.8","0.0.9","0.1.0","0.2.0","1.0.0","1.1.0","1.2.0","1.2.1","2.0.0","2.0.1","2.1.0","2.2.0","2.3.0","2.4.0","2.4.1","2.6.0","2.6.1","2.7.0","3.0.0","3.1.1","3.1.2","3.1.3","3.1.4","3.2.0","3.2.1","3.2.2","3.2.3","3.2.4","3.2.5","3.3.0","3.3.1","3.3.2","3.3.4","3.4.0","3.5.0","3.5.1","3.5.2","3.5.5","3.5.6","3.6.0","3.6.1","3.6.2","3.7.0","3.8.0","3.8.1","3.8.2","3.8.3","3.8.4","3.8.5","3.8.6","3.8.7","3.8.8","3.8.9","3.8.10","3.8.11","3.9.0"]
npm ERR! notarget 
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of 'angular-multi-step-form'

Does this have anything to do with the project's dev dependency on the 4.0 branch of gulp?