title: How to show errors on submit in AngularJS and stop form from submitting without disabling the submit button?
body: <p>i want to validate my form with having errors for submitting empty fields what should i do in my controller?</p>
  
  <pre><code>&lt;form id="login-form" name="LoginForm" action="/home" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator()"&gt;
  
      &lt;input type="email" name="Email" id="email" tabindex="1"
             ng-model="login.email"
             ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
             placeholder="Email" ng-required="true"&gt;
      &lt;span style="color:red; display:block; text-align:center;"
            ng-show="LoginForm.Email.$dirty &amp;&amp; LoginForm.Email.$error.pattern"&gt;
       * Please Enter Valid Email&lt;/span&gt;
      &lt;span style="color:red; display:block; text-align:center;"
            ng-show="LoginForm.Email.$submitted &amp;&amp; LoginForm.Email.$error.required"&gt;
       * Email required&lt;/span&gt;
  
      &lt;input type="password" name="password" ng-minlength="8" id="password"
             tabindex="2" ng-model="login.password"
             placeholder="Password" ng-required="true"&gt;
      &lt;div ng-show="LoginForm.password.$dirty &amp;&amp; LoginForm.password.$invalid"&gt;
        &lt;small style="color:red; display:block; text-align:center;"&gt;
          * Invalid Password&lt;/small&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="LOG IN" /&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>it shows the first error but not showing error of $submitted</p>
  
  <p>why should i do here?</p>
  
  <pre><code>var app = angular.module('qec', []);
  app.controller('login' ,['$scope' , function ($scope) {
      $scope.LoginValidator = function (isValid) {
      };
  }]);
  </code></pre>