Angular : ng-message 提交点击验证

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 : 如果用户提交了表单则为真，即使其无效。

<!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 提交点击验证

Angular : ng-message validation on submit click

javascript

validation

angularjs

ng-messages