Angular validation directive not working properly

Issue

I am using custom angular directive for showing validation. Directive code is as below

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);
            });


        }
    }

}]);

and Html is as below

<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>

Controller code :

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]);

Now When I open form below input control validation span is displaying by default . When I click on Login button then its showing in red and working fine. problem is it shouldn't show by default when Page is opend.. Please see image below

Solution

Instead of this

loginForm.password.$error.required

try this

(loginForm.$submitted || loginForm.username.$dirty) && loginForm.password.$error.required

Answered By - Raghu Venmarathoor