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
Directive controller
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:

Examples

Docs

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

troch / angular-multi-step-form

readme