AngularJS Step by Step Form using ngRoute

Submitted by nurhodelta_17 on Wednesday, January 24, 2018 - 19:04.

Getting Started

I've used CDN for Bootstrap, Angular JS, Angular Animate and Angular 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.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('/')"></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" ng-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;
}
 
.disabled {
        cursor: default; opacity: 0; 
}
 
/*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', ['ngRoute', 'ngAnimate']);
 
myapp.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'first.html'
    })
    .when('/second', {
        templateUrl: 'second.html'
    })
    .when('/third', {
        templateUrl: 'third.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});
 
myapp.controller('mainCtrl', function($scope, $location){
    $scope.feedback = {};
 
    $scope.submit = function(){
        alert('Form Submitted!');
        $location.path('/');
        $scope.feedback = {};
    }
 
    $scope.active = function(path){
        return ($location.path() === path) ? 'active step' : 'step';
    }
 
    //directions
    $scope.gotoFirst = function(){
        $location.path('/');
    }
    $scope.gotoSecond = function(){
        $location.path('/second');
    }
    $scope.gotoThird = function(){
        $location.path('/third');
    }
});

In here, we have added the dependency for Angular Animate and Angular Route, 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 type="button" class="btn btn-primary btn-block" ng-disabled="step1.$invalid" ng-click="gotoSecond()">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 type="button" class="btn btn-success" ng-click="gotoFirst()"><span class="glyphicon glyphicon-arrow-left"></span> Previous</button>
        <button type="button" class="btn btn-primary" ng-disabled="step2.$invalid" ng-click="gotoThird()">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 type="button" class="btn btn-success" ng-click="gotoSecond()"><span class="glyphicon glyphicon-arrow-left"></span> Previous</button>
        <button type="button" class="btn btn-primary" ng-disabled="step3.$invalid" ng-click="submit()"><span class="glyphicon glyphicon-check"></span> Submit</button>
</form> 

Notice that I have used buttons in directions instead of using anchor tag. This is because I found an issue about anchor tag with ng-disable wherein even if disabled you can still click the anchor tag which is not supposed to be. That ends this tutorial. Happy Coding :)

Add new comment

62 views