Class Errors

public

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

This class is not directly instantiable.

Every Model has an errors property that is an instance of Errors. This can be used to display validation error messages returned from the server when a record.save() rejects.

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

app/models/user.js
1
2
3
4
5
6
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') username;
  @attr('string') email;
}

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

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

Your backend would be expected to return an error response that described the problem, so that error messages can be generated on the app.

API responses will be translated into instances of Errors differently, depending on the specific combination of adapter and serializer used. You may want to check the documentation or the source code of the libraries that you are using, to know how they expect errors to be communicated.

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={{@model.username}} /> </label>
{{#each @model.errors.username as |error|}}
  <div class="error">
    {{error.message}}
  </div>
{{/each}}

<label>Email: <Input @value={{@model.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: