Observe error property on Ember.Model

Ember Data
1

I’m trying to create a component, which creates an input field for a specific field on a Ember.model.

When calling model.save() I would like to display the possible error messages regarding that field, right beneath the field. But I can’t seem to get notified when my Errors property on Ember.Model changes.

Is there a way to observe the model.errors property, in order to display the correct error messages?

I tried:

  • .property{‘model.errors’} and Ember.computed
  • .observes(‘model.errors’)
  • .observes(‘model’).on(‘becameInvalid’)

I think i’m pretty close, as my errors with the solution below, are being dipslayed, however when I change my input to something else invalid, and try to save again, my original errors do not get cleared, and the new ones do not get added. When I put breakpoints, or console.logs, I can see that the code never enters that particular section for displaying errors again, so my guess is that the computed property is not working. And my template is never updated with new errors.

Here’s my code at the moment:

My component: components/inputfield-text.js

import Ember from 'ember';

export default Ember.Component.extend({
	value: Ember.computed('model', 'field', {
    get: function() {
			return this.get('model').get(this.get('field'));
    },
    set: function(key, value) {
    	this.get('model').set(this.get('field'), value);
			return value;
    }
	}),
	errors: function(){
		var errors = this.get('model.errors');
		console.log(errors)
		return errors.errorsFor(this.get('field'));
	}.property('model.errors', 'model', 'field')
});

My Component’s template: templates/components/inputfield-text.hbs

{{input type='text' value=value class='form-control' placeholder=placeholder}}

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

And for the sake of completeness, the code I use for embedding the component in a template:

{{inputfield-text model=model field='name'}}
2

I haven’t tried this myself on any recent versions of ember-data, but @alexspeller wrote up a nice blog post on this Server Side Validations with Ember Data and DS.Errors

3

Brilliant, the article pointed me in the right direction (even with the horrible Coffeescript),

I had to add to my computed property, correct code below, notice difference between.

property('model.errors', 'model', 'field')

And

property('model.errors.[]')

Correct component code: components/inputfield-text.js

import Ember from 'ember';

export default Ember.Component.extend({
	value: Ember.computed('model', 'field', {
    get: function() {
			return this.get('model').get(this.get('field'));
    },
    set: function(key, value) {
    	this.get('model').set(this.get('field'), value);
			return value;
    }
	}),
	errors: function(){
		var errors = this.get('model.errors');
		console.log(errors)
		return errors.errorsFor(this.get('field'));
	}.property('model.errors.[]')
});
4

Excellent, and I share you sentiment :smile: