我在我的项目中使用 AngularJS 和 Spring MVC。在这里,我将 JSON 发送到 rest Controller ,它验证字段并在验证失败的情况下返回错误对象,如下所示:
{"validationErrors":[
{
"errorCode":"emailId",
"errorDescription":"Please enter email address."
}
]}
现在,在jsp上如何显示内联错误信息?
我的jsp代码如下:
<label ng-model="emailLbl" for="userEmailID">Email ID</label>
<input type="email" ng-model="user.emailId" name="emailId" id="userEmailID" placeholder="Enter your email ID" />
//Here, I want to display inline error message
</div>
我的js代码是: //更新 angular.module('小程序', []);
angular.module('MiniApp').controller('loginCtrl', ['$scope', '$http','$location',function($scope,$http,$location) {
$scope.loginSubmit = function(user) {
$scope.errors = [];
$scope.jsonObject = angular.copy(user);
var data1;
setTimeout(function(){
data1=document.getElementById("hiddenJson").value;
$http({
method: 'POST',
url: 'register1/login',
headers: {'Content-Type': 'application/json'},
data: data1
}).
success(function(data, status, headers, config) {
alert('Success:'+data.prospectResponseDetails.emailId+" - "+status);
$location.path('WEB-INF/pages/login-step1.jsp');
}).
error(function(data, status, headers, config) {
_showValidationErrors($scope, data.validationErrors);
$scope.errors = data.validationErrors;
});
$scope.getErrorMessage = function(errorCode) {
var error;
$scope.errors.forEach(function(error) {
if(error.errorCode === errorCode) {
error = error.errorDescription;
}
});
return error;
}
}, 200);
};
}]);
最佳答案
根据您的代码:
验证错误被捕获在:
error(function(data, status, headers, config) {
_showValidationErrors($scope, data.validationErrors);
});
所以不要使用 _showValidationErrors
,而是使用
$scope.errors = data.validationErrors;
现在在您的 HTML 中:
<input type="email" ng-model="user.emailId" name="emailId" id="userEmailID" placeholder="Enter your email ID" />
//Here, I want to display inline error message
<ul ng-if="errors.length > 0">
<li ng-repeat="error in errors">{{error.errorCode}} {{error.errorDescription}}</li>
</ul>
</div>
重置错误:在你的内部
$scope.loginSubmit = function(user) {
$scope.errors = []; // reset errors to empty array
编辑://根据评论
显示特定的错误信息:
$scope.getErrorMessage = function(errorCode) {
var error;
$scope.errors.forEach(function(error) {
if(error.errorCode === errorCode) {
error = error.errorDescription;
}
});
return error;
}
现在在您的 HTML 中:
<input type="email" ng-model="user.emailId" name="emailId" id="userEmailID" placeholder="Enter your email ID" />
<div ng-if="getErrorMessage('emailId')">
{{getErrorMessage('emailId')}}
</div>
关于javascript - 如何使用angular js在表单上显示服务器端验证错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28853636/