1

When my server returns a 422, it prompts Ember Data to create an InvalidError message. The message might read something like:

The backend rejected the commit because it was invalid: username must be at least 4 characters long

This message appear in my console, but I want to display it in the browser so the user can see it. How do I access this error in the template, though? I can't find any documentation on Ember Data's error handling.

nullnullnull
  • 8,039
  • 12
  • 55
  • 107

3 Answers3

3

Your JSON should look like this:

 {
    "errors":
    {
       "body":["can\'t be blank"],
       "title":["should begin with a capital letter"]
    }
 }

Then you can show all error messages like this:

{{#each errors.messages}}
  <div>
    <p class="label label-danger">{{this}}</p>
  </div>
{{/each}}

Also you can show only messages for a specific value (in example for the title) like this: 

{{#each error in errors.title}}
  <div><p class="label label-danger">{{error.message}}</p></div>
{{/each}}

If you only want to show that something is wrong you could do it like so:

{{#if errors}}
  <p>Some errors occurred</p>
{{/if}}

Please note that the scope in the views could be different. It could be necessary to use model.errors or similar to access the errors object.

Here you can find a full example jsBin.

kunerd
  • 1,076
  • 10
  • 25
  • This works. Part of the problem I was experiencing is that ActiveModel::Serializers was not sending error messages by default. You have to manually include `errors` as an attribute. – nullnullnull May 26 '14 at 19:48
  • Yes, I forgot that. For everyone with the same problem, have a look at: http://stackoverflow.com/a/23066083/2689033. As timothycommoner mentioned, it's also possible to include the errors into ActiveModel::Serializers. – kunerd May 27 '14 at 07:48
0

The errors property of your model should contain any errors when isValid is false. Check out the adapterDidInvalidate method in ember-data.

sheldonbaker
  • 1,089
  • 7
  • 14
  • As far as I can tell, Ember isn't actually invalidating the model. Just to test, I created a simple {{#if !isValid}}Invalid!{{/if}}. "Invalid" never appears, not even after a failed validation. – nullnullnull Mar 15 '14 at 19:06
  • That seems odd. Try following the logic in ember-data when you save - look specifically for `DS.InvalidError` - it's an object that should be populated with your server's `errors` hash if a 422 HTTP code is returned. – sheldonbaker Mar 16 '14 at 00:34
  • Found `DS.InvalidError`, and like you describe, it seems to create an error of validation errors. I can't find anywhere in the code where it sets `isValid` to false, though. I followed the trace all the way back to `fire`, and nothing seems to have that behavior. Perhaps its because I'm using ActiveModelAdapter? It overwrites the RESTAdapter at several points. – nullnullnull Mar 16 '14 at 17:11
  • Beyond that, the model's `errors` property doesn't seems to change. I setup a computed property that observed `errors`, and it only triggered on page-load. (The model comes with an `errors` property with an empty `messages` array.) After submitting an invalid resource, the computed property doesn't fire. Neither does the `messages` array change. – nullnullnull Mar 16 '14 at 17:19
  • Observing `errors` only would work as you describe - it's an object that is initialized once and has keys added and removed. ActiveModelAdapter specifically overwrites RESTAdapter at some points to add error-handling logic - in `ajaxError`, for example. That may be another place to investigate. – sheldonbaker Mar 17 '14 at 18:29
  • As for where `isValid` is set, it's an action: [`becameInvalid`](https://github.com/emberjs/data/blob/d55198c2fe18bc259f94674dcec4316ebfd30c3b/packages/ember-data/lib/system/model/model.js#L296) – sheldonbaker Mar 17 '14 at 18:30
0

try 

DS.InvalidError({username:"username must be at least 4 characters long"}).

From the Documentation:

The DS.InvalidError must be constructed with a single object whose keys are the invalid model properties, and whose values are the corresponding error messages. For example:

  return new DS.InvalidError({
    length: 'Must be less than 15',
    name: 'Must not be blank'
  });
Community
  • 1
  • 1
dominikg
  • 11