Ember.js server side form validation display

Question

I have a form in Ember JS and I want to:

1. Display the errors for the fields right next to each field in error ;

2. Display any general errors at the top of the form ;

3. Have these errors persist while the user correct the form.

Edit: JSBin here

I have the following template for the form:

{{#if isSaving}}
  <p>Saving Record</p>
{{/if}}
{{#if isError}}
  <p>There was an error saving the record</p>
  Base errors( {{errors.base}} )
{{/if}}
<form {{action 'create' this on='submit'}}>
  <p>Title: {{input type="text" value=title}}</p>
  <p>Title Errors(  {{errors.title}}  )</p>
  <p>Body: {{textarea value=body}}</p>
  <button>Create</button>
</form>

Right now my server is returning the following

{"errors":{"body":["can't be blank"],"title":["should begin with a capital letter"],"base":["General error message here"]}}

errors.title above is returning an object. How can I get the message out of it.

When the user starts typing, the object message is wiped out.

The isError never seems to fire.

What am I doing wrong?

Answer 1

errors is an array, and the proper way to iterate over them is the following:

{{#each errors.fieldname}}
  {{this.message}}
{{/each}}

Answer 2

First: Your errors.title is (like all the other properties of your server response) an Array so you'd get the title with errors.title[0]. As you cannot reference it like this from Handlebars directly you'd either have to provide it from the controller or pass your server response to a custom helper.

Second: It's hard (or better to say impossible) to tell why isError is never triggered/set without code...