diff --git a/README.md b/README.md index b40351a..16a6ed5 100644 --- a/README.md +++ b/README.md @@ -206,7 +206,7 @@ You can use `testSelector` in your acceptance tests: * `find(testSelector('do-feedback', 'lastName'));` * `find(testSelector('do-hint', 'lastName'));` -You can also manually set the attributes: +You can also manually set the attributes: ```hbs {{field.do-control 'lastName' data-test-do-control='mySpecialSelector' }} ``` @@ -300,6 +300,19 @@ module.exports = function(environment) { }; ``` +To integrate with [`ember-changeset-validations`](https://github.com/DockYard/ember-changeset-validations) you should configure your errorsPath as follows: + +```js +module.exports = function(environment) { + var ENV = { + 'ember-do-forms': { + // The path to be read on the object for an errors array + errorsPath: 'error.{PROPERTY_NAME}.validation', + } + }; +}; +``` + ## Contributing **Any contribution**, be it an issue, a feature or a bugfix is greatly appreciated :heart: diff --git a/addon/components/do-field.js b/addon/components/do-field.js index 160eb8a..820984f 100644 --- a/addon/components/do-field.js +++ b/addon/components/do-field.js @@ -51,6 +51,9 @@ const DoLabelComponent = Component.extend({ // Should work with cp-validations and changeset-validations as well errorMessage: computed('errors.[]', function() { let firstError = this.get('errors.0') || {}; + if (typeof firstError === 'string') { + return firstError; + } return firstError.message || firstError.validation; }), diff --git a/addon/templates/components/do-control.hbs b/addon/templates/components/do-control.hbs index d491adf..afaef70 100644 --- a/addon/templates/components/do-control.hbs +++ b/addon/templates/components/do-control.hbs @@ -28,6 +28,8 @@ name=controlName autocomplete=autocomplete + autocapitalize=autocapitalize + autocorrect=autocorrect form=form autofocus=autofocus checked=checked @@ -52,4 +54,4 @@ tabindex=tabindex title=title }} -{{/if}} \ No newline at end of file +{{/if}} diff --git a/tests/integration/components/do-field-test.js b/tests/integration/components/do-field-test.js index aea337c..a1e1e13 100644 --- a/tests/integration/components/do-field-test.js +++ b/tests/integration/components/do-field-test.js @@ -265,6 +265,24 @@ test('it shows feedback when it has errors', function(assert) { assert.equal(this.$('.feedback-class').text().trim(), "can't be blank", 'has the correct feedback message'); }); +test('it shows feedback when errorsPath is an array of strings', function(assert) { + assert.expect(3); + this.set('object.validations', { + attrs: { lastName: { errors: ["can't be blank"] } } + }); + + this.render(hbs` + {{#do-field 'lastName' object=object as |field|}} + {{field.do-control 'text' }} + {{field.do-feedback}} + {{/do-field}} + `); + assert.equal(this.$('.feedback-class').length, 0, "there's no feedback element initially"); + this.$('div').trigger('focusout'); + assert.equal(this.$('.feedback-class').length, 1, 'a feedback element is present'); + assert.equal(this.$('.feedback-class').text().trim(), "can't be blank", 'has the correct feedback message'); +}); + test('the feedback can also read its message from the validation key', function(assert) { assert.expect(2); this.set('object.validations', { @@ -446,4 +464,3 @@ test('data-test-* attributes are overriden when config.autoDataTestSelectors is assert.equal(this.$('p').attr('data-test-do-feedback'), 'you', 'do-feedback has the data attribute'); assert.equal(this.$('small').attr('data-test-do-hint'), 'up', 'do-hint has the data attribute'); }); -