Angular：提交点击时的ng消息验证

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>

请运行此代码段并进行检查。

这是参考

您的已更改的pl子链接

Answer 2

更新柱塞链接

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

Angular：提交点击时的ng消息验证

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-11-29 05:46:01

解决方案2
0 2016-11-29 05:51:54

Angular：提交点击时的ng消息验证

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-11-29 05:46:01

解决方案2 0 2016-11-29 05:51:54

解决方案1
2 已采纳 2016-11-29 05:46:01

解决方案2
0 2016-11-29 05:51:54