AngularJS Step by Step Form

Submitted by nurhodelta_17 on Wednesday, January 24, 2018 - 17:13.

Getting Started

I've used CDN for Bootstrap, Angular JS, Angular Animate and Ui-Router so you need internet connection for them to work.

index.html

This is the main view of our app.

<!DOCTYPE html>
<html ng-app="myapp">
<head>
        <meta charset="utf-8">
        <title>AngularJS Step by Step Form</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
        <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" ng-controller="mainCtrl">
        <h1 class="page-header text-center">AngularJS Step by Step Form</h1>
        <h3 class="text-center">Feedback Form</h3>
        <div class="stepindicator">
          <span ng-class="active('/first')"></span>
          <span ng-class="active('/second')"></span>
          <span ng-class="active('/third')"></span>
        </div>
        <div class="row">
                <div class="col-sm-4 col-sm-offset-4">
                        <div class="panel panel-default">
                                <div class="panel-body">
                                        <div id="myview" ui-view></div>
                                </div>
                        </div>
                </div>
        </div>
        <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                        {{ feedback }}
                </div>
        </div>  
</div>
<script src="app.js"></script>
</body>
</html>

In here we have set up our step indicator for users to determine the steps and I've put the value of the users input at the bottom.

style.css

Next, we add the ff styles for our form and our animation.

/*Form Styles*/
.stepindicator {
        text-align: center;
}
 
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none; 
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
 
.step.active {
  opacity: 1;
}
 
.panel { 
        position:relative; 
        min-height:230px; 
        overflow:hidden;
        margin-top: 10px;
}
 
/*Animations*/
#myview.ng-enter,
#myview.ng-leave { 
        position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
#myview.ng-enter { 
    -webkit-animation:slideInRight 0.5s both ease;
        -moz-animation:slideInRight 0.5s both ease;
        animation:slideInRight 0.5s both ease; 
}
 
#myview.ng-leave { 
    -webkit-animation:slideOutLeft 0.5s both ease;
        -moz-animation:slideOutLeft 0.5s both ease;
        animation:slideOutLeft 0.5s both ease;   
}
 
@keyframes slideOutLeft {
        to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
        to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
        to      { -webkit-transform: translateX(-200%); }
}
 
@keyframes slideInRight {
        from    { transform:translateX(200%); }
        to              { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
        from    { -moz-transform:translateX(200%); }
        to              { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
        from    { -webkit-transform:translateX(200%); }
        to              { -webkit-transform: translateX(0); }
}

app.js

This contains our angular js scripts.

var myapp = angular.module('myapp', ['ui.router', 'ngAnimate']);
 
myapp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/first');
    
    $stateProvider
    
        .state('first', {
            url: '/first',
            templateUrl: 'first.html'
        })
        .state('second', {
            url: '/second',
            templateUrl: 'second.html'
        })
        .state('third', {
            url: '/third',
            templateUrl: 'third.html'
        })
        
});
 
myapp.controller('mainCtrl', function($scope, $location){
    $scope.feedback = {};
 
    $scope.submit = function(){
        alert('Form Submitted!');
        $location.path('first');
        $scope.feedback = {};
    }
 
    $scope.active = function(path){
        return ($location.path() === path) ? 'active step' : 'step';
    }
});

In here, we have set up our routes in .config and we set up our main controller. active function determines which step is currently active.

Creating our Steps Template

Lastly, create the ff templates that serves as our steps. first.html

<form name="step1">
        <div class="form-group">
                <label>Firstname:</label>
                <input type="text" class="form-control" ng-model="feedback.firstname" required>
        </div>
        <div class="form-group">
                <label>Lastname:</label>
                <input type="text" class="form-control" ng-model="feedback.lastname" required>
        </div>
        <div class="col-sm-6 col-sm-offset-3">
                <button ui-sref="second" class="btn btn-primary btn-block" ng-disabled="step1.$invalid">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
        </div>
</form> 

second.html

<form name="step2">
        <div class="form-group">
                <label>Adress:</label>
                <input type="text" class="form-control" ng-model="feedback.address" required>
        </div>
        <div class="form-group">
                <label>Email:</label>
                <input type="email" class="form-control" ng-model="feedback.email" required>
        </div>
        <button ui-sref="first" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Previous</button>
        <button ui-sref="third" class="btn btn-primary" ng-disabled="step2.$invalid">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</form>

third.html

<form name="step3">
        <div class="form-group">
                <label>Message:</label>
                <textarea class="form-control" rows="4" ng-model="feedback.message" required></textarea>
        </div>
        <button ui-sref="second" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Previous</button>
        <button class="btn btn-primary" ng-disabled="step3.$invalid" ng-click="submit()"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form> 

That ends this tutorial. Happy Coding :)

Add new comment

70 views