Ember-changeset Integration

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:

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;
   }),
 

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}}
+{{/if}}

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');
 });
-