Angular:提交点击时的ng消息验证 [英] Angular : ng-message validation on submit click
问题描述
我正在使用具有一种表单的应用程序，它应该在输入错误时显示输入字段的验证错误消息.
I am working on application where I've one form and It should show validation error message for input fields on wrong input.
我的表单将如下所示-
如果-
- 输入字段输入错误而修改
- 在必填字段中单击提交"按钮，无需进行修改.
它应该显示如下错误消息-
要实现这一点，我正在使用ng-message指令.它会帮助我在输入字段$ dirty上显示错误消息.但是对于提交"按钮，我找不到正确的方法.目前，我正在使用一个标记，该标记将在提交点击时进行修改.但是我对一些更好的方法感兴趣.有没有预定义的方法可以实现这一目标?
To achieve this I am using ng-message directive. It wil help me to show error message on $dirty of input field. But for Submit button I could not find correct way. Currently I am using a flag which will be modified on submit click. But I am interested in some better approach. Is there predefined method available to achieve this ?
这是我尝试过的完整示例，这是 plunkr 一样.
Here is the complete example which I tried, and here is plunkr for the same.
<!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>
谢谢！
推荐答案
您可以将 $submitted 用于表单，
You can use $submitted for the form,
Syntax: formname.$submitted
Syntax: formname.$submitted
$ submitted:，如果用户提交了表单(即使表单无效)，则为true.
$submitted : True if user has submitted the form even if its invalid.
<!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>
请运行此代码段并进行检查.
这篇关于Angular:提交点击时的ng消息验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
