Ember.js showing ember-data validation errors on page

I'm having issues getting the default JSONAPIAdapter to propagate model validation errors to the login page. I've validated that the API server is sending the response correctly by catching the error and using console.log to validate the adapter and model are processing the data returned correctly, but for some reason, i am unable to get it to show up on the page itself:

JSON response from API server:

{ errors: [
    {
        detail: 'Display name already exists',
        source: {
            pointer : 'data/attributes/display-name'
        } 
    },
    {
        detail: 'Email already exists',
        source: {
            pointer : 'data/attributes/email'
        }
    }
]}

This also returns a status of 422 which shows in the console log:
Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)

If i do not .catch() the error, it console.logs the following, which from what i have read, and seen in the code is:

ember.debug.js:19746 Error: The adapter rejected the commit because it was invalid
    at ErrorClass.EmberError (ember.debug.js:19681)
    at ErrorClass.AdapterError (errors.js:23)
    at ErrorClass (errors.js:49)
    at Class.handleResponse (rest.js:820)
    at Class.handleResponse (data-adapter-mixin.js:100)
    at Class.superWrapper [as handleResponse] (ember.debug.js:25367)
    at ajaxError (rest.js:1341)
    at Class.hash.error (rest.js:915)
    at fire (jquery.js:3187)
    at Object.fireWith [as rejectWith] (jquery.js:3317)

The controller code is the following:

user.save().then(() => {
  this.set('valid', 'Success! Log in!');
}).catch(() => {
console.log(user.get('errors.email')[0].message);
console.log(user.get('errors.displayName')[0].message);
});

The above catches and console.logs the error messages correctly, which means the adapter is successfully catching the error and serializing it for use in model. The problem comes in with the template:

<div class="col-sm-6">
  <h2>ERRORS</h2>
  
      <h4></h4>
  
  
      <h4></h4>
  
  <h2>END ERRORS</h2>
</div>

According to DS.ERRORS Class this should be the appropriate way to set this up, but I am unable to get the errors to show properly on my front end between the ERRORS and END ERRORS headers.