Angular Multi step form

multiStepForm is an angular module to create multi step forms and wizards. Create your steps like your would create your views with ngRoute or ui-router!

It is lightweight (6kb minified) but extremely versatile and powerful.

Requirements

• Angular 1.3+

Features

• Steps are controlled views and are easily configured
• Asynchronous loading of steps (templateUrl and resolve)
• Forward and backward animations
• Isolated or non isolated scopes for steps
• Track step validity if it contains a form
• onCancel, onFinish and onStepChange callbacks
• Browser navigation with search URL parameter
• You decide what level of control you expose to the user: next, previous, jump to state, finish, cancel, etc...
• Place summary, controls, etc... in header or footer
• Support for multiple components per view

Breaking changes with 1.1.x

See changelog and migration guide:

• Changelog
• Migration to 1.1.x

Examples

• Getting started
• Using forms
• Saving data
• CSS transitions
• Cancel and Finish
• Browser navigation
• Inside a modal

Docs

• Configuring your steps
• The multiStepContainer directive
• Steps and directive scopes
• Multi step form instance object
• Animations, navigation, callbacks
• Advanced guide

Getting started

Grab the sources with bower, npm or download from Github: https://github.com/troch/angular-multi-step-form/tree/master/dist:

$ npm install --save angular-multi-step-form;
$ bower install --savev angular-multi-step-form

Include multiStepForm module in your app:

angular.module('yourApp', [
    'multiStepForm'
]);

Or (with npm):

import multiStepForm from 'angular-multi-step-form';

angular.module('yourApp', [
    multiStepForm.name
]);

You can then configure your steps

$scope.steps = [
    {
        template: 'Hello <button class="btn btn-default" ng-click="$nextStep()">Next</button>'
    },
    {
        template: 'World <button class="btn btn-default" ng-click="$previousStep()">Previous</button>'
    }
];

And start your multiple step form / wizard:

• Use the multiStepContainer directive
• You need to use the stepContainer inside multiStepContainer to tell it where to load steps.

<multi-step-container steps="yourSteps">
    <step-container></step-container>
</multi-step-container>