1
我正在应用程序，我有一个窗体，它应该显示错误输入的输入字段的验证错误消息。Angular：在提交点击ng-message验证
我的表格看起来就像这样 -
它应该显示错误消息，如果 -
- 输入栏输入错误修改
- Submit按钮点击无修改所需的输入字段。
它应该显示如下错误信息 -
要做到这一点，我使用NG-消息指令。它会帮助我在$ 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>
谢谢！
您可以用'myForm的。$ submitted' – Sravan
你为什么不使用角2的形式验证技术。如果你正在使用angualr 2. https://scotch.io/tutorials/angular-2-form-validation – Harshakj89
@ Harshakj89，他正在使用'angular1.5.0'而不是angular2。 – Sravan