Ember Data - DS.Errors not great for template consumption

[workmanw]

After upgrading to Ember Data 1.13 and the new DS.InvalidError format we noticed some real problems with the DS.Errors API. The biggest issue for us is that it's cumbersome to look up an error by it's related field. For example, if the field firstName were to fail validation, I use to be able to do:

<input class="{{if user.errors.firstName 'error'}}" value={{user.firstName}}></input>
{{#if user.errors.firstName}}
  <div class="alert alert-danger" role="alert">
    {{user.errors.firstName}}
  </div>
{{/if}}

This allows each form input element to individually indicated if it's value is invalid and show the related error near by. For example:

This shouldn't really be all that earth shattering right? A lot of apps do this. I think even bootstrap has or had this UI paradigm at some point.

---

The new DS.Errors API creates several more hops in the lookup process. Now instead of user.errors.firstName I have to look things up via user.errors.firstName.firstObject.message.

So this:

<input class="{{if user.errors.firstName 'error'}}" value={{user.firstName}}></input>
{{#if user.errors.firstName}}
  <div class="alert alert-danger" role="alert">
    {{user.errors.firstName}}
  </div>
{{/if}}

becomes:

<input class="{{if user.errors.firstName.firstObject.message 'error'}}" value={{user.firstName}}></input>
{{#if user.errors.firstName.firstObject.message }}
  <div class="alert alert-danger" role="alert">
    {{user.errors.firstName.firstObject.message }}
  </div>
{{/if}}

---

There has to be some better solution here right? What is the real world use case for having the errors even be an array? The docs show show iterating the list of errors for a single field, but I don't really understand why this would be the case.

[runspired]

You can accomplish this with a minor refactor by creating a custom helper firstMessage.

import Ember from 'ember';
const {
  get
} = Ember;

export function firstMessage([errors]) {
  return errors ? get(errors.objectAt ? errors.objectAt(0) : errors[0], 'message') '';
}

export default Ember.HTMLBars.makeBoundHelper(firstMessage);

You would replace your use of user.errors.firstName with (firstMessage user.errors.firstName)

[workmanw]

To add to what @runspired said, this would be used like:

<div class="alert alert-danger" role="alert">
  {{first-message user.errors}}
</div>

This was discussed in the dev-ember-data channel this afternoon.

I'll probably leave this open for a bit, but ultimately I've been convinced of the validity of allowing for multi error values on a single field.