CODEWITHSUNDEEP
ember.jserror-handlingember-data
Gregg
Gregg

Reputation: 35864

Displaying Errors on Unsuccessful Save with Ember

I have a route for new-thing and it's template is a form. When this form submits, I call a createThing action in the route, passing in this. 

export default Ember.Route.extend({
  model() {
    return {};
  },

  actions: {
    createThing(thing) {
      let thingToSave = this.store.createRecord('thing', {
        name: thing.name,
        description: thing.description
      });

      thingToSave.save().then(function() {
         // happy path
      }).catch(function(reason) {
        // unhappy path
      });
    }
  }
});

In my template, I have the following:

{{#each model.errors.name as |error|}}
  <div class="error">
    {{error.message}}
  </div>
{{/each}}

But something isn't quite wired up right. I'm unclear on how the route's model ends up being the thing I'm trying to save so that the errors will render when the bad path triggers.

Upvotes: 0

Views: 260

Answers (1)

Chris Peters
Chris Peters

Reputation: 18090

Your model() should create the blank record:

model() {
  return this.store.createRecord('thing');
}

That will bind the form fields to your model object.

Then you can save in the route and respond to the results of the HTTP request:

actions: {
  createThing() {
    this.get('model').save().then((thing) => {
      // happy path
    },
    (err) => {
      // unhappy path
    })
  }
}

Upvotes: 3

Related Questions