https://github.com/troch/angular-multi-step-form
An angular module for creating multi step forms / wizards
https://github.com/troch/angular-multi-step-form
Last synced: over 1 year ago
JSON representation
An angular module for creating multi step forms / wizards
- Host: GitHub
- URL: https://github.com/troch/angular-multi-step-form
- Owner: troch
- License: isc
- Created: 2015-06-12T13:30:30.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-05-24T02:43:14.000Z (about 6 years ago)
- Last Synced: 2024-10-18T05:54:25.796Z (almost 2 years ago)
- Language: JavaScript
- Homepage: http://troch.github.io/angular-multi-step-form
- Size: 157 KB
- Stars: 144
- Watchers: 11
- Forks: 44
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/angular-multi-step-form)
[](https://travis-ci.org/troch/angular-multi-step-form)
[](https://coveralls.io/r/troch/angular-multi-step-form?branch=master)
# 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:
- [Changelog](./CHANGELOG.md)
- [Migration to 1.1.x](./docs/migrating-to-1.1.x.md)
## Examples
- [Getting started](http://blog.reactandbethankful.com/angular-multi-step-form/#/getting-started)
- [Using forms](http://blog.reactandbethankful.com/angular-multi-step-form/#/using-forms)
- [Saving data](http://blog.reactandbethankful.com/angular-multi-step-form/#/saving-data)
- [CSS transitions](http://blog.reactandbethankful.com/angular-multi-step-form/#/css-transitions)
- [Cancel and Finish](http://blog.reactandbethankful.com/angular-multi-step-form/#/cancel-finish)
- [Browser navigation](http://blog.reactandbethankful.com/angular-multi-step-form/#/browser-navigation)
- [Inside a modal](http://blog.reactandbethankful.com/angular-multi-step-form/#/inside-modal)
## Docs
- [Configuring your steps](./docs/configuring-steps.md)
- [The multiStepContainer directive](./docs/multi-step-container.md)
- [Steps and directive scopes](./docs/scopes.md)
- [Multi step form instance object](./docs/multi-step-instance.md)
- [Animations, navigation, callbacks](./docs/steps-lifecycle.md)
- [Advanced guide](./docs/advanced-guide.md)
## Getting started
Grab the sources with bower, npm or download from Github: [https://github.com/troch/angular-multi-step-form/tree/master/dist](./dist):
```sh
$ npm install --save angular-multi-step-form;
$ bower install --save angular-multi-step-form
```
Include `multiStepForm` module in your app:
```javascript
angular.module('yourApp', [
'multiStepForm'
]);
```
Or (with npm):
```javascript
import multiStepForm from 'angular-multi-step-form';
angular.module('yourApp', [
multiStepForm.name
]);
```
You can then configure your steps
```javascript
$scope.steps = [
{
template: 'Hello Next'
},
{
template: 'World Previous'
}
];
```
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.
```html
```