How to display server side validation error messages on form with angular js

Question

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

  };
}]);

Should study some angular form tutorials

charlietfl
– charlietfl

2015-03-04 12:02:32 +00:00
Commented Mar 4, 2015 at 12:02 — charlietfl
– charlietfl, Commented Mar 4, 2015 at 12:02

mohamedrias · Accepted Answer · 2015-03-04 13:04:12Z

1

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>

edited Mar 4, 2015 at 13:04

answered Mar 4, 2015 at 11:53

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user2758176 Over a year ago

But, now problem is, suppose I have two fields on jsp then how should I display error message on each field?

mohamedrias Over a year ago

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

user2758176 Over a year ago

actually, as per business requirement, I want to pass list of error objects which contain errorCode and ErrorDescription like:

user2758176 Over a year ago

{"validationErrors":[{"errorCode":"emailId","errorDescription":"Please enter email address.","errorCode":"Password","errorDescription":"Please enter password"}]} How can I do this with JSON like this

mohamedrias Over a year ago

Great. In that case, create a function and pass errorCode. If the errorCode is present show the message.

|

Collectives™ on Stack Overflow

How to display server side validation error messages on form with angular js

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related