How do you show validation errors returned from WebAPI?

Question

I am using latest version of angular.js and WebAPI & bootstrap.

Imagine a form with few textboxes & submit button. Once a user submits the form, data is validated by WebAPI call on server as we cant trust client side validations.

In API controller, we do all our business validations. Assuming that data entered in all the textboxes are invalid:

How should i return error message from my WebAPI so that the form displays it properly ?

In normal MVC way without angular, this is easy. We can add errors to ModelState and the view will pick it and show the errors properly.

score 2 · Accepted Answer · answered Feb 04 '15 at 15:28

AngularJS has built in form validation:

WebApi

You can return errors in whatever format you want. I would recommend that the response should contain following information:

An error message describing the error
In which part of the request the error occured (Payload, url params, query params)
Which attribute triggered the error (email, password, ...)
The response should also have the correct error status code (400, 401, ...)

Client

Assume that your response looks like this:

{
    "message": "Email is invalid",
    "area": "payload",
    "field": "email"
}

Create your form and make sure the name attribute is assigned, since in your form validation you will need the it. By now angular will append form validations states to your elements:

<input type="email" name="email" id="email" ng-model="user.email" ng-minlength="6" required />

You can now dynamically display error messages by accessing the validation fields:

<span ng-show="form.email.$error.required && form.email.$dirty">Email can not be empty</span>

Not the id, the id is view specific, it depends on what the server has got in the reuqest. For example, in a login request you would send email and password in the post body. The error response object field would be "email". — Himmet Avsar, Feb 04 '15 at 17:32
Ok. But after i send errors from server, how does the UI gets updated to highlight errors ? — NoobDeveloper, Feb 04 '15 at 20:40

score 1 · Answer 2 · answered Feb 04 '15 at 15:25

1

The angular way is using form with the angular directive ng-valid. you can simply add it e.g. to your input:

<input type="text" ng-valid="myFunc()">

You can define myFunc() within your scope, do whatever you like and return a boolean value.

Now, just add ng-disabled to your submit button and bind it to angular's form $valid property:

<button type="submit" ng-disabled="!myForm.$valid">Cool Button</button>

Note: myForm is the name of your form.

Further information in the docs.

answered Feb 04 '15 at 15:25

DonJuwe

4,477
3
34
59

This is what I am looking for : When we send ViewModel from client to Server (WebAPI in my case) , what should my WebAPI return (list of errors ?) so that i can highlight errors on page at control level. – NoobDeveloper Feb 04 '15 at 15:28
If you are doing AJAX calls with promises you could return false in your `.error()` function. – DonJuwe Feb 04 '15 at 15:30

score 0 · Answer 3 · edited May 23 '17 at 12:14

The solution for me was : https://stackoverflow.com/a/23087715/3290276 Just i needed to change two things 1)Get data and 2)low case the property modelState.

parseErrors(response.data)

function parseErrors(response) {
        var errors = [];
        for (var key in response.modelState) {
            for (var i = 0; i < response.modelState[key].length; i++) {
                errors.push(response.modelState[key][i]);
            }
        }
        return errors;
    }

How do you show validation errors returned from WebAPI?

3 Answers3