Class DS.Errors

Holds validation errors for a given record organized by attribute names.

Every DS.Model has an errors property that is an instance of DS.Errors. This can be used to display validation error messages returned from the server when a record.save() rejects. This works automatically with DS.ActiveModelAdapter, but you can implement ajaxError in other adapters as well.

For Example, if you had an User model that looked like this:

app/models/user.js
1
2
3
4
5
6
import DS from 'ember-data';

export default DS.Model.extend({
  username: attr('string'),
  email: attr('string')
});

And you attempted to save a record that did not validate on the backend.

1
2
3
4
5
var user = store.createRecord('user', {
  username: 'tomster',
  email: 'invalidEmail'
});
user.save();

Your backend data store might return a response that looks like this. This response will be used to populate the error object.

1
2
3
4
5
6
{
  "errors": {
    "username": ["This username is already taken!"],
    "email": ["Doesn't look like a valid email."]
  }
}

Errors can be displayed to the user by accessing their property name to get an array of all the error objects for that property. Each error object is a JavaScript object with two keys:

  • message A string containing the error message from the backend
  • attribute The name of the property associated with this error message
1
2
3
4
5
6
7
8
9
10
11
12
13
<label>Username: {{input value=username}} </label>
{{#each model.errors.username as |error|}}
  <div class="error">
    {{error.message}}
  </div>
{{/each}}

<label>Email: {{input value=email}} </label>
{{#each model.errors.email as |error|}}
  <div class="error">
    {{error.message}}
  </div>
{{/each}}

You can also access the special messages property on the error object to get an array of all the error strings.

1
2
3
4
5
{{#each model.errors.messages as |message|}}
  <div class="error">
    {{message}}
  </div>
{{/each}}

Show:

Module: ember-data
attribute
String
messages
(Array|String)

Adds error messages to a given attribute and sends becameInvalid event to the record.

Example:

1
2
3
if (!user.get('username') {
  user.get('errors').add('username', 'This field is required');
}
Module: ember-data

Removes all error messages and sends becameValid event to the record.

Example:

app/routes/user/edit.js
1
2
3
4
5
6
7
8
9
10
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    retrySave: function(user) {
       user.get('errors').clear();
       user.save();
     }
  }
});
Module: ember-data
attribute
String
returns
Array

Returns errors for a given attribute

1
2
3
4
5
6
7
8
var user = store.createRecord('user', {
  username: 'tomster',
  email: 'invalidEmail'
});
user.save().catch(function(){
  user.get('errors').errorsFor('email'); // returns:
  // [{attribute: "email", message: "Doesn't look like a valid email."}]
});
Module: ember-data
attribute
String
returns
Boolean
true if there some errors on given attribute

Checks if there is error messages for the given attribute.

app/routes/user/edit.js
1
2
3
4
5
6
7
8
9
10
11
12
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    save: function(user) {
       if (user.get('errors').has('email')) {
         return alert('Please update your email before attempting to save.');
       }
       user.save();
     }
  }
});
Module: ember-data
target
Object
becameInvalid
Function
becameValid
Function

Register with target handler

Module: ember-data
attribute
String

Removes all error messages from the given attribute and sends becameValid event to the record if there no more errors left.

Example:

app/models/user.js
1
2
3
4
5
6
7
import DS from 'ember-data';

export default DS.Model.extend({
  email: DS.attr('string'),
  twoFactorAuth: DS.attr('boolean'),
  phone: DS.attr('string')
});
app/routes/user/edit.js
1
2
3
4
5
6
7
8
9
10
11
12
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    save: function(user) {
       if (!user.get('twoFactorAuth')) {
         user.get('errors').remove('phone');
       }
       user.save();
     }
  }
});