Simple Example and Demo of Multistep form Using Angularjs

I have earlier shared multi step from using bootstrap and jQuery.This angular tutorial help to create beautiful multi-step forms wizards using angular js and bootstrap.

I am using angularjs multi-steps from library. This is a very wounder full angular directive based on angular wizards library. You can create a very easily multi steps submission form layout using this angular directive.

As you have seen multi-steps form many places like shopping cart, questionnaires, employment registration etc. We will create the following files into this angular js multi-step form example,

• index.html : This file is used for the main entry point of the application, here we include all library, js and css files. We’ll create a simple HTML layout for multi-steps form functionality
• app.js : The angular js application and controller file.

Please create the above files and put them into your angularjs application folder.

Also Checkout other tutorials of angular grid,

• Simple Example and Demo of Multistep form Using Angularjs
• Simple Example of Pagination Using jQuery and Bootstrap
• Simple Bootstrap Form Layout Examples
• Best Free Angularjs Grid & Table Plugin Examples

Step 1: We will create index.html file and added the below libraries into the head section of this file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="angular-steps.js"></script>
<script src="app.js"></script>

Included bootstrap css, angular steps library and app.js files.

Step 2: We will define TestApp angular application and create testController into this file.

(function(window, angular, undefined){
                'use strict';
                angular.module('TestApp', [
      				'angular-steps'
                ]);
	angular.module('TestApp').controller('testController', testController);
	function testController($scope, StepsService){
		$scope.stepData = {};
		$scope.submitFinal = function(age) {
		    console.log(age);
		    $scope.stepData.age = age;
		    console.log($scope.stepData);
		}

	}
})(window, window.angular);

As you can see, I have injected 'angular-steps' library into the application and the service ‘StepsService’ into the controller. I have defined submitFinal() method into the controller which will call at the final step.

Step 3: We will define the steps into index.html file. The angular steps use a master 'steps' directive that will hold child steps form HTML view.

<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Step 1:</h3>
</div>
<div class="panel-body"><form>
<div class="form-group"><label for="exampleInputEmail1">Email Address</label> <input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email"></div>
</form></div>
<div class="clearfix panel-footer"><button class="btn btn-success pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button></div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Step 2:</h3>
</div>
<div class="panel-body"><form>
<div class="form-group"><label for="exampleInputName">Enter Name</label> <input id="exampleInputName" class="form-control" type="text" placeholder="Name"></div>
</form></div>
<div class="clearfix panel-footer"><button class="btn btn-danger pull-left"><i class="glyphicon glyphicon-chevron-left"></i> Prev</button> <button class="btn btn-success pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button></div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Step 3:</h3>
</div>
<div class="panel-body"><form>
<div class="form-group"><label for="exampleInputName">Enter Age</label> <input id="exampleInputAge" class="form-control" type="number" placeholder="Age"></div>
</form></div>
<div class="clearfix panel-footer"><button class="btn btn-danger pull-left"><i class="glyphicon glyphicon-chevron-left"></i> Prev</button> <button class="btn btn-success pull-right">Complete <i class="glyphicon glyphicon-chevron-right"></i></button></div>
</div>

You can download the source code and Demo from the below link.

Conclusion :

We have created multi steps form using angular-steps directive. We have also created simple angularjs apps with controller. You can customize this example as per your need.