diff --git a/addon/components/bs-form/element.js b/addon/components/bs-form/element.js index 8b2190d..675ce97 100755 --- a/addon/components/bs-form/element.js +++ b/addon/components/bs-form/element.js @@ -1,5 +1,5 @@ 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 { @@ -7,7 +7,7 @@ export default class BsFormElementWithChangesetValidationsSupport extends BsForm @dependentKeyCompat get errors() { - let error = this.model?.error?.[this.property]?.validation; + let error = get(this, `model.error.${this.property}.validation`); return error ? [error] : []; } diff --git a/tests/integration/components/bs-form-element-test.js b/tests/integration/components/bs-form-element-test.js index c4b86c9..9637a95 100755 --- a/tests/integration/components/bs-form-element-test.js +++ b/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` + + + + `); + + 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);