如何在 AngularJS 中显示提交错误并在不禁用提交按钮的情况下停止提交表单？

Question

我想验证我的表单，在提交空字段时出现错误我应该在我的控制器中做什么？

<form id="login-form" name="LoginForm" action="/home" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator()">

    <input type="email" name="Email" id="email" tabindex="1"
           ng-model="login.email"
           ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
           placeholder="Email" ng-required="true">
    <span style="color:red; display:block; text-align:center;"
          ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">
     * Please Enter Valid Email</span>
    <span style="color:red; display:block; text-align:center;"
          ng-show="LoginForm.Email.$submitted && LoginForm.Email.$error.required">
     * Email required</span>

    <input type="password" name="password" ng-minlength="8" id="password"
           tabindex="2" ng-model="login.password"
           placeholder="Password" ng-required="true">
    <div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid">
      <small style="color:red; display:block; text-align:center;">
        * Invalid Password</small>
    </div>
    <input type="submit" value="LOG IN" />

</form>

它显示了第一个错误，但没有显示 $submitted

的错误

我为什么要在这里做？

var app = angular.module('qec', []);
app.controller('login' ,['$scope' , function ($scope) {
    $scope.LoginValidator = function (isValid) {
    };
}]);

Answer 1

在提交函数内的控制器中验证表单的 $valid 属性。

更新

$scope.LoginValidator = function ($event) {
  $event.preventDefault();
  if($scope.LoginForm.$valid){
    console.log("valid");
  }else{
    console.log("invalid");
    console.log($scope.LoginForm.$error.require);
    if($scope.LoginForm.Email.$invalid){
      $scope.mailRequire = true;
    }
    if($scope.LoginForm.password.$invalid){
      $scope.passRequire = true;
    }
  }
  };

也用于显示需要电子邮件的错误。像这样改变 html

<span style="color:red; display:block; text-align:center;"
      ng-show="mailRequire">* Email required</span>

这里是 plnkr

如何在 AngularJS 中显示提交错误并在不禁用提交按钮的情况下停止提交表单？

How to show errors on submit in AngularJS and stop form from submitting without disabling the submit button?

angularjs

validation

angularjs-ng-form

angular-forms

ng-submit