Errors Example

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  model: Ember.computed(function() {
    const notifs = Array.from({ length: 5 }).map(() => this.store.createRecord('optin-notification'));
    notifs.forEach((notif, i) => {
      notif.set('name', `OptinNotification ${i}`);
      if (i % 2 === 0) {
        notif.send('becameInvalid');
        notif.errors.add('name', [
          'Must be lower case',
          'Must contain a number',
        ]);
      }
    });
    return notifs;
  }),
  errors: Ember.computed(function() {
    return this.model.reduce((acc, notif) => {
      for (const error of notif.errors.messages) {
        acc.push(error);
      }
      return acc;
    }, []);
  }).volatile(),
});

models.optin-notification.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  name: attr('string'),
});

templates.application.hbs

<ul>
{{#each model as |notification|}}
  <li>
    {{notification.name}}
    {{#unless notification.errors.isEmpty}}*{{/unless}}
  </li>
{{/each}}
</ul>
<hr />
<ul>
{{#each errors as |err|}}
  <li>
    {{err}}
  </li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}