각 유효성 검사 지시문이 올바르게 작동하지 않습니다.

Question

유효성 검사를 표시하기 위해 맞춤 각도 지시문을 사용하고 있습니다. 지침 코드는

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


     } 
    } 

}]); 

아래로하고 HTML은

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

나는 기본적으로 표시되는 입력 제어 검증 범위 아래 양식을 열 때. 로그인 버튼을 클릭하면 빨간색으로 표시되고 정상적으로 작동합니다. 문제는 페이지에 opend 기본적으로 표시되지해야입니다 ..이

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

Answer 1

아래 이미지를 참조하시기 바랍니다 ng-messagesdirective을 확인하십시오. 그 꽤 우아한. 예 :

다음 양식 유효성 검사와 함께 사용할 수 있습니다. 유효성 검사기의 오류 메시지를 $ error 객체의 요소에 놓으면 UI에 자동으로 렌더링됩니다.

Answer 2

은을 가지고 노력이

loginForm.password.$error.required 

의 대신