Angular JS and Bootstrap 3 Login Form Demo

Sam Deering Sam Deering Angular Demos & Coding Examples

Angular JS and Bootstrap 3 Login Form Demo.

Image

View Demo

HTML

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
        <div class="row text-left">
          <div class="col-md-6 col-md-offset-3">
            <form role="form" name="loginForm" ng-submit="login()" ng-class="{submitted:submitted}" novalidate>
              <div class="form-group">
                <label for="username">Username</label>
                <input type="text"
                       class="form-control"
                       name="username"
                       id="username"
                       ng-model="credentials.username"
                       placeholder="Username"
                       required />
                <span class="error"
                      ng-show="(loginForm.username.$dirty || submitted) && loginForm.username.$error.required">This is a required field.</span>
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="password"
                       class="form-control"
                       name="password"
                       id="password"
                       ng-model="credentials.password"
                       placeholder="Password"
                       required />
                <span class="error"
                      ng-show="(loginForm.password.$dirty || submitted) && loginForm.password.$error.required">This is a required field.</span>
              </div>
              <div class="form-group">
                <button type="submit"
                        class="btn btn-primary pull-right"
                        value="Login" title="Login">Login</button>
                <!-- ng-disabled="!loginForm.$valid" -->
              </div>
              <p><a href="/forgot">Forgot password</a></p>
            </form>
          </div>
        </div>
 

 

login.js ng-controller

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
define(['app'], function (app) {
  'use strict';
 
  app.controller('Login', ['$scope', '$auth', '$location'
  , function ($scope, $auth, $location) {
 
    $scope.submitted = false;
    $scope.login = function () {
 
        if ($scope.loginForm.$valid) {
            // Submit as normal
            console.log('submitting form...');
            $auth.login($scope.credentials);
        } else {
            console.log('form invalid!');
            $scope.submitted = true;
        }
    }
});
 

form.less

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
form {
 
    input {
 
        &.ng-invalid {
 
                &.ng-dirty {
 
                    border: 1px solid red;
 
                }
 
        }
 
        &.ng-valid {
 
            border: 1px solid green;
 
        }
 
    }
 
    span {
 
        &.error {
 
            padding: 5px;
            display: inline-block;
            font-size: 0.8em;
            color: red;
 
        }
 
    }
 
    &.submitted {
 
        input {
 
            &.ng-invalid {
 
                border: 1px solid red;
 
            }
 
        }
 
    }
 
}
 

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

2 thoughts on “Angular JS and Bootstrap 3 Login Form Demo”

  1. Pingback: Top 5 Bootstrap AngularJS Modules

Leave a Reply

Your email address will not be published. Required fields are marked *