EmberJs and ASPNET MVC WebAPI Validation

I use ember.js for my front end which talks to an REST ASP.NET Web API backend.  I wanted to leverage the awesome validation built into ASP.NET.  So when I post the following JSON to my /api/users

I should get errors because the email and password are required fields and I do.  The returned JSON response looks like this:

I decided to refactor handling the errors into an ember component.  First of all, my ember controller POST happens using ember data:

Basically, all I do is call save on the ember model, which issues a POST.  If it succeeds, it transitions to the users route, if there is any error, it sets the “errors” property to the response.  All I have to do to use this on my form is add the component like this:

Here is the component template, which basically loops through a string array of errors and display them on the screen:

The component definiton, creates an “observable” property that depends on the errors value (which is set above in my view containing the component):

The code above simply parses the validation errors and adds them to a dictionary of errors.


When I submit an empty form, this is how it looks like: