Validation error handling in Ember.js

Question

I have a rails application that serves json for an external interface.

I am trying to display validation errors in a form on the client.

Rails returns this json:

{"errors":{"hometown":["is too long (maximum is 64 characters)"]}}

In my handlebars template for the current route, I am trying to iterate over errors, but I am not getting any output for the error section:

<div class="form-group">
  <label>Hometown</label>
  {{#each errors.hometown}}
    {{this}}
  {{/each}}
  {{input type="text" class="form-control" valueBinding="effectiveUser.hometown" disabled=entryNotAllowed size="50"}}
</div> 

I also updated my RESTadapter based on this blog: https://marcqualie.com/2014/04/model-errors-in-emberjs to include:

  ajaxError: function(jqXHR) {
    var error = this._super(jqXHR);
    if (jqXHR && jqXHR.status === 422) {
      var jsonErrors = Ember.$.parseJSON(jqXHR.responseText)["errors"];
      return new DS.InvalidError(jsonErrors);
    } else {
      return error;
    }
  }

I still don't understand the context of what this error object is and why my view has access to it, which I, but several different sources, seem to say that this setting should work. Any insight would be appreciated.

Answer 1

, , ember , :

//, save(), . rejected, reason . DS.InvalidError reason.

myModel.save().then(function(value){
  //success
},function(reason){
  //fail
});

( , , ), - ;

actions: {
  submitForm : function(){
    this.set("errors",null);
    var ctx=this;
    myModel.save().then( function(){
      //display a succes msg ?
    }, function(errors){
      ctx.set("errors",errors);
    });
  }                              
}

Answer 2

Ember Data Beta 1.0 Beta 12 . InvalidError .

PR # 2392, , . , , .

Ember - , . , (, "" ), . issue # 1984 .

DS.Model.reopen({
    adapterDidInvalidate: function(errors) {
      var recordErrors = this.get('errors');
      for (var key in errors) {
        if (!errors.hasOwnProperty(key)) continue;
        recordErrors.add(key, errors[key]);
      }
    }
});

DS.Errors:

{{#each message in errors.messages}}
  <div class="error">
    {{message}}
  </div>
{{/each}}

errorsFor .

, , , . , , ember-forms.

Ember Data, , RESTAdapter .

Answer 3

ajaxError, .

App.ApplicationAdapter = DS.RESTAdapter.extend({
  ajaxError: function(jqXHR){
  error = this._super(jqXHR);

  if (jqXHR.status == 422) {
    response = Ember.$.parseJSON(jqXHR.responseText);
    errors = {};

    if (typeof response.errors !== 'undefined') {
      jsonErrors = response.errors;
      Ember.keys(jsonErrors).forEach(function(key) {
        errors[Ember.String.camelize(key)] = jsonErrors[key]
      });
    }
    if (typeof response.message !== 'undefined') {
      errors['Message'] = response.message;
    }

    return new DS.InvalidError(errors)
  } else {
    return error
  }
  }

});

, errors .

{{#each message in errors.messages}}
  <strong>{{message}}</strong><br />
{{/each}}