Handling Validation Errors in Ember.js

Asked By: Anonymous

I have a rails app serving json to an ember frontend.

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

Rails is returning this json:

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

In my handlebars template for the current route I am attempting to iterate through the errors but I don’t get any output for the errors 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 really dont understand the context of what this errors object is and why my view has access to it that I but several different sources seem to say this setup should work. Any insight would be appreciated.

Solution

Answered By: Anonymous

Well as far as i understand ember it’s normal this isn’t working :

To save your model in your controller/route/view you are performing a save()operation which returns a promise. If a promise is rejected a function to handle this rejection can be executed with a reason as a parameter. In your case the DS.InvalidError object will become this reason.

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

so in your case (but depends where you are handeling action i will supose in controller) something like that should do the trick;

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