I have a simple form like this. I am submitting this form via ajax using angularjs. I want to validate this form before sending ajax request and need to show the error to user. I am a newbie to angular. Please Help me
Here is my code.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<div ng-app="Myapp">
<div ng-controller="orderFormController">
Item : <input type="text" name="item" ng-model='item' required> <p></p>
Rate: <input type="text" name="rate" ng-model='rate' required> <p></p>
<button type="button" ng-click='saveorder()' >SAVE ORDER</button>
</div>
<script>
var Myapp = angular.module('Myapp', ["ngRoute"]);
Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
$scope.saveorder = function () {
// Validate form here and set the error in form
$http.post("order/save/", data).success(function (res, status, headers, config) {
$scope.message = res;
}).error(function (data, status) {
$scope.message = res;
});
}
}]);
</script>
The very simple implementation could be done in a few steps:
<form>
tag with a name
attribute. Use saveorder
in ng-submit
attribute.<span class="error" ng-show="form.item.$error.required
">Final result should look like:
<div ng-controller="orderFormController">
<form name="form" ng-submit="saveorder()">
Item : <input type="text" name="item" ng-model='item' required> <p></p>
<span class="error" ng-show="form.item.$error.required"> Item field is required!</span>
Rate: <input type="text" name="rate" ng-model='rate' required> <p></p>
<span class="error" ng-show="form.rate.$error.required"> Rate field is required!</span>
<button type="button">SAVE ORDER</button>
</form>
</div>
You can read Angular native documentation about form validation. More details are provided there.
Read this article.. https://scotch.io/tutorials/angularjs-form-validation
It explained it really well and and if still there are confusions , ask about those after putting some effort.
you should use angular form validation for that or for custom validation use
var Myapp = angular.module('Myapp', ["ngRoute"]); Myapp.controller('orderFormController', ['$scope', '$http', function($scope, $http) { $scope.formdata = {}; $scope.saveorder = function(formdata) { $scope.error = ''; // Validate form here and set the error in form if (angular.isUndefined(formdata.item) == true || angular.isUndefined(formdata.rate) == true) { $scope.error = "Both Item and Rate are required." return false; } else { $scope.error = ''; } $http.post("order/save/", formdata).success(function(res, status, headers, config) { $scope.message = res; }).error(function(status, res) { $scope.message = res; }); } }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> <div ng-app="Myapp"> <div ng-controller="orderFormController"> <span style="color:red">{{error}}</span><br> Item : <input type="text" name="item" ng-model='formdata.item' required> <p></p> Rate: <input type="text" name="rate" ng-model='formdata.rate' required> <p></p> <button type="button" ng-click='saveorder(formdata)' >SAVE ORDER</button> </div>
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.