Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I am using AngularJS and Spring MVC in my project. In this, I am sending JSON to rest controller which validate fields and return Error object in case of validation failure as follows: 

{"validationErrors":[
    {
        "errorCode":"emailId",
        "errorDescription":"Please enter email address."
    }
]}

Now, on jsp how to display inline error message?

My jsp code is as follows:

   <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>

And my js code is: //Updated angular.module('MiniApp', []);

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);

  };
}]);
share|improve this question
    
Should study some angular form tutorials – charlietfl Mar 4 '15 at 12:02
up vote 1 down vote

As per your code:

The validation errors are captured in :

error(function(data, status, headers, config) {
        _showValidationErrors($scope, data.validationErrors);
   });

So instead of _showValidationErrors, use 

$scope.errors = data.validationErrors;

Now in your 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>

To reset errors : inside your 

$scope.loginSubmit = function(user) {

    $scope.errors = []; // reset errors to empty array

EDIT: // as per comment

To show specific error messages:

$scope.getErrorMessage = function(errorCode) {
   var error;
   $scope.errors.forEach(function(error) {
     if(error.errorCode === errorCode) {
       error = error.errorDescription;
     }
   });
   return error;
}

Now in your 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>
share|improve this answer
    
But, now problem is, suppose I have two fields on jsp then how should I display error message on each field? – user2758176 Mar 4 '15 at 12:07
    
In that case, you must send the ValidationErrorMessages based on field as key. Like {"email" : {"errorCode": "", "errorDescription" : ""}, "password": {}} etc.. Now beneath each field you can check errors.email if its present then errors.email.errorCode and errors.email.errorDescription ;) – mohamedrias Mar 4 '15 at 12:11
    
actually, as per business requirement, I want to pass list of error objects which contain errorCode and ErrorDescription like: – user2758176 Mar 4 '15 at 12:13
    
{"validationErrors":[{"errorCode":"emailId","errorDescriptio‌​n":"Please enter email address.","errorCode":"Password","errorDescription":"Please enter password"}]} How can I do this with JSON like this – user2758176 Mar 4 '15 at 12:15
    
Great. In that case, create a function and pass errorCode. If the errorCode is present show the message. – mohamedrias Mar 4 '15 at 12:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.