Angular : ng-message validation on submit click
Question
I am working on application where I've one form and It should show validation error message for input fields on wrong input.
My form will look like this -
It should show error message if -
- Input field modified with wrong input
- Submit button clicked without modification in required input field.
It should show error message as below -
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 ?
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>
Thanks!
2 answers
solution1
2 ACCPTED 2016-11-29 05:46:01
You can use $submitted for the form,
Syntax: formname.$submitted
$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>
Please run this snippet and check.
solution2
0 2016-11-29 05:51:54
更新柱塞链接
You could go with disabling submit button till your form isn't correct one
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.