use get for nested properties (#28)

Author: basz

addon/components/bs-form/element.js

@@ -1,13 +1,13 @@
 import BsFormElement from 'ember-bootstrap/components/bs-form/element';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
 import { dependentKeyCompat } from '@ember/object/compat';
 
 export default class BsFormElementWithChangesetValidationsSupport extends BsFormElement {
   '__ember-bootstrap_subclass' = true;
 
   @dependentKeyCompat
   get errors() {
-    let error = this.model?.error?.[this.property]?.validation;
+    let error = get(this, `model.error.${this.property}.validation`);
     return error ? [error] : [];
   }
 

tests/integration/components/bs-form-element-test.js

@@ -17,6 +17,15 @@ module('Integration | Component | bs form element', function(hooks) {
     ]
   };
 
+  const nestedValidation = {
+    nested: {
+      name: [
+        validatePresence(true),
+        validateLength({ min: 4 })
+      ]
+    }
+  };
+
   test('form is submitted if valid and validation success shown', async function(assert) {
     let model = {
       name: '1234',
@@ -66,6 +75,31 @@ module('Integration | Component | bs form element', function(hooks) {
     assert.verifySteps(['Invalid action has been called.']);
   });
 
+  test('validation nested errors are shown on submit', async function(assert) {
+    let model = {
+      nested: { name: '' }
+    };
+
+    this.set('model', model);
+    this.set('validation', nestedValidation);
+    this.submitAction = function() {
+      assert.ok(false, 'submit action must not been called.');
+    };
+    this.invalidAction = function() {
+      assert.step('Invalid action has been called.');
+    };
+
+    await render(hbs`
+      <BsForm @model={{changeset this.model this.validation}} @onSubmit={{this.submitAction}} @onInvalid={{this.invalidAction}} as |form|>
+        <form.element @label="Name" @property="nested.name" />
+      </BsForm>
+    `);
+
+    await triggerEvent('form', 'submit');
+    assert.dom('input').hasClass('is-invalid', 'input has error class');
+    assert.verifySteps(['Invalid action has been called.']);
+  });
+
   test('validation errors are shown after blur', async function(assert) {
     this.set('model', { name: '' });
     this.set('validation', validation);