角度妥当性検査指令が正しく機能しない

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

私は、デフォルトで表示された入力コントロールの検証スパン下記のフォームを開くとき。ログインボタンをクリックすると赤で表示され、正常に動作します。 問題は、それがページがオープンしましされ、デフォルトでは表示されないはずである。これ

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

Answer 1

下の画像を参照してください。 ng-messagesdirectiveをご覧ください。それはかなりエレガントです。例：

これを任意のフォーム検証と組み合わせることができます。バリデーターからのエラーメッセージを$ errorオブジェクトに配置するだけで、それらは自動的にUIにレンダリングされます。

Answer 2

テイクしようと、この

loginForm.password.$error.required 

の代わりに