Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- angularFormsApp.directive('showErrors',['$timeout', function ($timeout) {
- return {
- restrict: 'A',
- require: '^form',
- link: function (scope, el, attrs, formCtrl) {
- // find the text box element, which has the 'name' attribute
- var inputEl = el[0].querySelector("[name]");
- // convert the native text box element to an angular element
- var inputNgEl = angular.element(inputEl);
- // get the name on the text box so we know the property to check
- // on the form controller
- var inputName = inputNgEl.attr('name');
- var helpText = angular.element(el[0].querySelector(".help-block"));
- // only apply the has-error class after the user leaves the text box
- inputNgEl.bind('blur', function () {
- el.toggleClass('has-error', formCtrl[inputName].$invalid);
- helpText.toggleClass('hide', formCtrl[inputName].$valid);
- });
- scope.$on('show-errors-event', function () {
- el.toggleClass('has-error', formCtrl[inputName].$invalid);
- });
- scope.$on('hide-errors-event', function () {
- $timeout(function () {
- el.removeClass('has-error');
- }, 0, false);
- });
- }
- }
- }]);
- <div class="container" id="login-form">
- <a href="index.html" class="login-logo"><img src="assets/img/logo-big.png"></a>
- <div class="row">
- <div class="col-md-4 col-md-offset-4">
- <div class="panel panel-default">
- <div class="panel-heading">
- <h2>Login Form</h2>
- </div>
- <div class="panel-body">
- <form name="loginForm" class="form-horizontal" novalidate>
- <div class="form-group mb-md" show-errors>
- <div class="col-xs-12">
- <div class="input-group">
- <span class="input-group-addon">
- <i class="ti ti-user"></i>
- </span>
- <input type="text" class="form-control" placeholder="Username" autocomplete="Off" ng-required="true" name="username" autofocus ng-model="loginUser.username">
- </div>
- <span class="help-block" ng-if="loginForm.username.$error.required">Username is required</span>
- </div>
- </div>
- <div class="form-group mb-md" show-errors>
- <div class="col-xs-12" >
- <div class="input-group">
- <span class="input-group-addon">
- <i class="ti ti-key"></i>
- </span>
- <input type="password" class="form-control" placeholder="Password"
- name="password"
- ng-model="loginUser.password" autocomplete="Off"
- ng-required="true">
- </div>
- <span class="help-block" ng-if="loginForm.password.$error.required">Password is required</span>
- </div>
- </div>
- <div class="form-group mb-n">
- <div class="col-xs-12">
- <a href="extras-forgotpassword.html" class="pull-left">Forgot password?</a>
- <div class="checkbox-inline icheck pull-right p-n">
- <label for="">
- <input type="checkbox"></input>
- Remember me
- </label>
- </div>
- </div>
- </div>
- </form>
- </div>
- <div class="panel-footer">
- <div class="clearfix">
- <a href="extras-registration.html" class="btn btn-default pull-left">Register</a>
- <a href="" class="btn btn-primary pull-right" ng-click="$event.preventDefault(); SubmitLoginForm()">Login</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- var loginController = function ($scope, $window, $routeParams, $uibModal, $location, $filter, $rootScope, DataService, SharedProperties) {
- $rootScope.bodylayout = 'focused-form animated-content';
- $scope.loginUser = {
- username: "",
- password:""
- }
- $scope.load = function () {
- //getAppointmentInfo();
- };
- $scope.SubmitLoginForm = function () {
- $scope.$broadcast('show-errors-event');
- if ($scope.loginForm.$invalid)
- return;
- }
- }
- angularFormsApp.controller("loginController", ["$scope", "$window", "$routeParams", "$uibModal", "$location", "$filter", "$rootScope", "DataService", "SharedProperties", loginController]);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement