Question

我正在处理一个表单的应用程序，它应该显示错误输入的输入字段的验证错误消息。

我的表单将如下所示 -

如果 -

，则应显示错误消息

使用错误输入修改的输入字段
点击提交按钮，无需修改所需的输入字段。

它应显示如下错误消息 -

为了达到这个目的，我使用的是ng-message指令。它将帮助我在输入字段的$ dirty上显示错误消息。但是对于提交按钮，我找不到正确的方法。目前我正在使用一个标志，将在提交点击时进行修改。但我对一些更好的方法感兴趣。有预定义的方法可以实现吗？

以下是我尝试的完整示例，此处为plunkr。

 <!doctype html>

 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
     <script>
         var app = angular.module('myApp', ['ngMessages']);
         app.controller('myCtrl', function($scope) {

             $scope.submitForm = function() {
                 $scope.submitted = true;
                 if (myForm.$valid) {
                     alert('Form submitted with passed validation');
                 }
             };

         });
     </script>
 </head>

 <body ng-app="myApp" ng-controller="myCtrl">
     <form name="myForm" novalidate ng-submit="submitForm()">
         <label>
             Enter your name:
             <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
         </label>

         <div ng-if="submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
             <div ng-message="required">You did not enter a field</div>
             <div ng-message="minlength">Your field is too short</div>
             <div ng-message="maxlength">Your field is too long</div>
         </div>
         <br>
         <br>
         <label>
             Enter your phone number:
             <input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
         </label>

         <div ng-if="submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
             <div ng-message="required">You did not enter a field</div>
             <div ng-message="maxlength">Your field is too long</div>
         </div>
         <br>
         <br>

         <button type="submit">Submit</button>
     </form>
 </body>

 </html>

谢谢！

Answer 1

您可以使用 $submitted 作为表单

<强> Syntax: formname.$submitted

$ submitted：如果用户提交了表单即使其无效，则为True。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
     
    <script>
      var app = angular.module('myApp', ['ngMessages']);
         app.controller('myCtrl', function($scope) {

             $scope.submitForm = function() {
                 
                 if (myForm.$valid) {
                     alert('Form submitted with passed validation');
                 }
             };

         });
    </script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
     <form name="myForm" novalidate ng-submit="submitForm()">
         <label>
             Enter your name:
             <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
         </label>

         <div ng-if="myForm.$submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
             <div ng-message="required">You did not enter a field</div>
             <div ng-message="minlength">Your field is too short</div>
             <div ng-message="maxlength">Your field is too long</div>
         </div>
         <br>
         <br>
         <label>
             Enter your phone number:
             <input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
         </label>

         <div ng-if="myForm.$submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
             <div ng-message="required">You did not enter a field</div>
             <div ng-message="maxlength">Your field is too long</div>
         </div>
         <br>
         <br>

         <button type="submit">Submit</button>
     </form>
 </body>

</html>

请运行此代码段并检查。

Here is the reference

The changed plunker link of yours

Answer 2

更新Plunker Link

You could go with disabling submit button till your form isn't correct one

Angular：提交点击时的ng-message验证

2 个答案: