Displaying ModelState Errors with AngularJS in ASP.NET MVC

Question

Update:

The one you have in your sample link you posted its pretty simple the way the error message is rendering but if you look at mine show below its bit different then what you had and I have data.Errors=>ErrorId>>Message

enter image description here

Update END

I'm trying to show ModelState errors (like ValidationSummary) in ASP.NET MVC using AngularJS.

I'm unable to display the error messages that I'm getting from data.Errors

Here is my code in AngularJS:

$scope.AddUser = function ()
{
    $http.post('adduser', $scope.User).success(function (data, status, headers, config)
    {
        $scope.message = '';
        $scope.errors = [];

        if (data.success === false) {
            $scope.errors = [];
            $scope.errors = data.errors;
        }
        else {
            $scope.message('Successfully Added ' + $scope.User.UserName + '!');
            $scope.user = {};
        }
    }).error(function (data, status, headers, config)
    {
        $scope.errors = [];
        $scope.errors = data.errors;
        $scope.message = 'Unexpected Error';
    }); 
}

//html code:

 <form name="AddUsr" ng-submit="AddUser()">
            <div class="error">{{message}}</div>
            <div class="row">
                <div class="column third">User Name</div>
                <div class="column two-thirds"><input ng-model="User.UserName" required /></div>
            </div>
            <div class="row">
                <div class="column third">Email</div>
                <div class="column two-thirds"><input ng-model="User.Email" required /></div>
            </div>
            <div class="row">
                <div class="column full"><input type="submit" value="Add User" /></div>
            </div>
            <ul>
                <li id="errorMessages" class="error" data-ng-repeat="error in errors">{{error}}</li>
            </ul>
        </form>

enter image description here

Giablo · Accepted Answer · 2014-08-30 14:08:41Z

1

Based on your code, your controller action should doing something like this to return the .success and .errors via JSON when the model state is invalid. Is it doing this?

      if (ModelState.IsValid)
      {
            // Your logic here ...
            // ...

            // return true if successfull
           return Json(new { success = true});    
      }
      return Json(new
      {
          success = false,
          errors = ModelState.Keys.SelectMany(k => ModelState[k].Errors)
                          .Select(m => m.ErrorMessage).ToArray()
      });

answered Aug 30, 2014 at 14:08

Giablo

2033 silver badges10 bronze badges

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

1 Comment

Nick Kahn Over a year ago

as you see the code, it is returning the error messages my question is more towards displaying the error message on the UI

Vadim · Accepted Answer · 2014-09-03 22:40:53Z

0

Assuming it's a typo and you're doing $scope.errors = data.Errors;

Your repeater should probably be:

<ul>
   <li id="errorMessages" class="error" data-ng-repeat="error in errors">{{error[0].Message}}</li>
</ul>

edited Sep 3, 2014 at 22:40

answered Sep 3, 2014 at 17:20

Vadim

18k5 gold badges41 silver badges62 bronze badges

5 Comments

Nick Kahn Over a year ago

certainly that's typo from my end when I was typing

Nick Kahn Over a year ago

Its not displaying any error message after I update your code

Vadim Over a year ago

@AbuHamzah then you'll need to provide more troubleshooting info as this seems to work plnkr.co/edit/01ia64S99tndLlYL7oE4?p=preview

Nick Kahn Over a year ago

I have updated my question with more troubleshooting information.

Vadim Over a year ago

@AbuHamzah I've updated the plunker and the answer. You just need to ensure that your repeater actually follows the pattern of the API. However I would modify the API as that structure seems ridiculously complicated

txavier · Accepted Answer · 2015-12-18 20:31:32Z

0

in order to show the ModelState error try accessing the ModelState object that should be returned as a property on the error.

<ul>
    <li id="errorMessages" class="error" data-ng-repeat="error in errors">
        {{error[0].ModelState[Object.keys(error[0].ModelState)[0]]}}
    </li>
</ul>

But, you must make sure that your back end is returning 'ModelState' in its response. Your 'error' object has a 'Message' property but it should also have a 'ModelState' property there also.

answered Dec 18, 2015 at 20:31

txavier

4794 silver badges6 bronze badges

Collectives™ on Stack Overflow

Displaying ModelState Errors with AngularJS in ASP.NET MVC

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related