do not show errors before user interaction

addon/components/fm-checkbox.js

@@ -6,9 +6,28 @@ export default Ember.Component.extend({
   classNameBindings: ['checkboxWrapperClass', 'errorClass'],
   fmConfig: Ember.inject.service('fm-config'),
   checkboxWrapperClass: Ember.computed.reads('fmConfig.checkboxWrapperClass'),
-  errorClass: Ember.computed('errors', 'fmConfig.errorClass', function() {
-    if(!Ember.isEmpty(this.get('errors'))) {
+  errorClass: Ember.computed('showErrors', 'fmConfig.errorClass', function() {
+    if(this.get('showErrors')) {
       return this.get('fmConfig.errorClass');
     }
-  })
+  }),
+
+  shouldShowErrors: false,
+  showErrors: Ember.computed('shouldShowErrors', 'errors', function() {
+    return this.get('shouldShowErrors') && !Ember.isEmpty(this.get('errors'));
+  }),
+
+  change() {
+    this.send('userInteraction');
+  },
+
+  focusOut() {
+    this.send('userInteraction');
+  },
+
+  actions: {
+    userInteraction() {
+      this.set('shouldShowErrors', true);
+    }
+  }
 });

addon/components/fm-field.js

@@ -29,8 +29,8 @@ export default Ember.Component.extend({
   placeholder: null,
   label: null,
   classNameBindings: ['wrapperClass', 'errorClass'],
-  errorClass: Ember.computed('errors', 'fmConfig.errorClass', function() {
-    if(!Ember.isEmpty(this.get('errors'))) {
+  errorClass: Ember.computed('showErrors', 'fmConfig.errorClass', function() {
+    if (this.get('showErrors')) {
       return this.get('fmConfig.errorClass');
     }
   }),
@@ -67,6 +67,15 @@ export default Ember.Component.extend({
       } else {
         this.set('value', value);
       }
+    },
+
+    userInteraction() {
+      this.set('shouldShowErrors', true);
     }
-  }
+  },
+
+  shouldShowErrors: false,
+  showErrors: Ember.computed('shouldShowErrors', 'errors', function() {
+    return this.get('shouldShowErrors') && !Ember.isEmpty(this.get('errors'));
+  })
 });

addon/components/fm-form.js

@@ -11,6 +11,11 @@ export default Ember.Component.extend({
   'for': null,
   submit: function(e) {
     e.preventDefault();
+    this.get('childViews').forEach((chieldView) => {
+        if (chieldView.get('shouldShowErrors') === false) {
+        chieldView.set('shouldShowErrors', true);
+      }
+    });
     this.sendAction('action', this.get('for'));
   }
 });

addon/components/fm-input.js

@@ -3,6 +3,10 @@ import DataAttributesSupport from '../mixins/data-attribute-support';
 
 export default Ember.TextField.extend(DataAttributesSupport, {
 
+  focusOut() {
+    this.sendAction('onUserInteraction');
+  },
+
   init: function() {
     if(this.get('parentView.forAttribute')) {
       this.set('elementId', this.get('parentView.forAttribute'));
@@ -11,4 +15,4 @@ export default Ember.TextField.extend(DataAttributesSupport, {
     this.setDataAttributes();
   }
 
-});
+});

addon/components/fm-radio-group.js

@@ -5,11 +5,22 @@ export default Ember.Component.extend({
   layout: layout,
   classNameBindings: ['radioGroupWrapperClass', 'errorClass'],
   fmConfig: Ember.inject.service('fm-config'),
-  errorClass: Ember.computed('errors', 'fmConfig.errorClass', function() {
-    if(!Ember.isEmpty(this.get('errors'))) {
+  errorClass: Ember.computed('showErrors', 'fmConfig.errorClass', function() {
+    if(this.get('showErrors')) {
       return this.get('fmConfig.errorClass');
     }
   }),
   radioGroupWrapperClass: Ember.computed.reads('fmConfig.radioGroupWrapperClass'),
-  labelClass: Ember.computed.reads('fmConfig.labelClass')
+  labelClass: Ember.computed.reads('fmConfig.labelClass'),
+
+  shouldShowErrors: false,
+  showErrors: Ember.computed('errors', 'shouldShowErrors', function() {
+    return this.get('shouldShowErrors') && !Ember.isEmpty(this.get('errors'));
+  }),
+
+  actions: {
+    userInteraction() {
+      this.set('shouldShowErrors', true);
+    }
+  }
 });

addon/components/fm-radio.js

@@ -15,7 +15,11 @@ export default Ember.Component.extend({
   }),
   change: function() {
     this.set('parentView.value', Ember.get(this.get('content'), this.get('optionValuePath')));
+    this.sendAction('onUserInteraction');
   },
-  optionLabelPath: Ember.computed.readOnly('parentView.optionLabelPath'),
-  optionValuePath: Ember.computed.readOnly('parentView.optionValuePath')
+  focusOut() {
+    this.sendAction('onUserInteraction');
+  },
+  optionLabelPath: 'label',
+  optionValuePath: 'value'
 });

addon/components/fm-select.js

@@ -35,6 +35,7 @@ export default Ember.Component.extend({
 
   change: function() {
     this.send('change');
+    this.sendAction('onUserInteraction');
     // console.log('changing');
   },
 
@@ -63,6 +64,9 @@ export default Ember.Component.extend({
       const value = (path.length > 0)? Ember.get(selection, path) : selection;
       this.attrs.action(value);
     }
-  }
+  },
 
+  focusOut() {
+    this.sendAction('onUserInteraction');
+  }
 });

addon/components/fm-textarea.js

@@ -2,6 +2,9 @@ import Ember from 'ember';
 import DataAttributesSupport from 'ember-form-master-2000/mixins/data-attribute-support';
 
 export default Ember.TextArea.extend(DataAttributesSupport, {
+  focusOut() {
+    this.sendAction('onUserInteraction');
+  },
 
   init: function() {
     if(this.get('parentView.forAttribute')) {
@@ -11,4 +14,4 @@ export default Ember.TextArea.extend(DataAttributesSupport, {
     this.setDataAttributes();
   }
 
-});
+});

addon/templates/components/ember-form-master-2000/fm-checkbox.hbs

@@ -10,6 +10,8 @@
     {{label}}
   </label>
 
-  {{fm-errortext errors=errors}}
+  {{#if showErrors}}
+    {{fm-errortext errors=errors}}
+  {{/if}}
 
-</div>
+</div>

addon/templates/components/ember-form-master-2000/fm-field.hbs

@@ -8,7 +8,9 @@
     value=value
     classNameBindings='errorClass inputClass'
     maxlength=maxlength
-    placeholder=placeholder}}
+    placeholder=placeholder
+    onUserInteraction='userInteraction'
+  }}
 {{/if}}
 
 {{#if isSelect}}
@@ -19,6 +21,7 @@
     prompt=prompt
     value=value
     action=(action 'selectAction')
+    onUserInteraction='userInteraction'
   }}
 {{/if}}
 
@@ -32,10 +35,11 @@
     maxlength=maxlength
     spellcheck=spellcheck
     disabled=disabled
+    onUserInteraction='userInteraction'
   }}
 {{/if}}
 
-{{#if errors}}
+{{#if showErrors}}
   {{fm-errortext errors=errors}}
 {{/if}}
 

addon/templates/components/ember-form-master-2000/fm-radio-group.hbs

@@ -4,8 +4,10 @@
 
 {{#each content as |option|}}
 
-  {{fm-radio content=option}}
+  {{fm-radio content=option onUserInteraction='userInteraction' optionLabelPath=optionLabelPath optionValuePath=optionValuePath}}
 
 {{/each}}
 
-{{fm-errortext errors=errors}}
+{{#if showErrors}}
+  {{fm-errortext errors=errors}}
+{{/if}}

tests/integration/components/fm-checkbox-test.js

@@ -1,15 +1,15 @@
-// import { moduleForComponent, test } from 'ember-qunit';
-// import hbs from 'htmlbars-inline-precompile';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
 // import {initialize} from 'ember-form-master-2000/initializers/fm-initialize';
-//
-// moduleForComponent('fm-checkbox', 'Integration | Component | fm-checkbox', {
-//   integration: true,
-//   setup: function() {
-//     this.container.inject = this.container.injection;
-//     initialize(null, this.container);
-//   }
-// });
-//
+
+moduleForComponent('fm-checkbox', 'Integration | Component | fm-checkbox', {
+  integration: true,
+  setup: function() {
+    this.container.inject = this.container.injection;
+    // initialize(null, this.container);
+  }
+});
+
 // test('fm-checkbox renders properly', function(assert) {
 //   assert.expect(2);
 //   this.render(hbs `{{fm-checkbox}}`);
@@ -24,3 +24,40 @@
 //
 //   assert.equal(this.$('label').text().trim(), 'This is the label', 'the fm-checkbox label matches');
 // });
+
+test('errors are shown after user interaction but not before', function(assert) {
+  this.set('errors', ['error message']);
+  this.render(hbs `{{fm-checkbox errors=errors}}`);
+  assert.ok(
+    this.$('.help-block').length === 0,
+    'error message is not shown before user interaction'
+  );
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'there is no errorClass before user interaction'
+  );
+  this.$('input').trigger('focusout');
+  assert.equal(
+    this.$('.help-block').text().trim(), 'error message',
+    'error message is shown after user interaction'
+  );
+  assert.ok(
+    this.$('div').hasClass('has-error'),
+    'errorClass is added after user interaction'
+  );
+  this.set('errors', []);
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is removed when errors array got empty'
+  );
+});
+
+test('change event is treated as userInteraction', function(assert) {
+  this.set('errors', ['error message']);
+  this.render(hbs `{{fm-checkbox errors=errors}}`);
+  this.$('input').change();
+  assert.ok(
+    this.$('div').hasClass('has-error'),
+    'errorClass is added after change event'
+  );
+});

tests/integration/components/fm-field-test.js

@@ -96,3 +96,84 @@ test('selection option label is updated when property changes', function(assert)
   this.set('content.0.label', 'bar');
   assert.equal(this.$('option').text().trim(), 'bar');
 });
+
+test('errors are not shown after user interaction but not before', function(assert) {
+  this.set('errors', ['error message']);
+  this.render(hbs `{{fm-field errors=errors}}`);
+  assert.ok(
+    this.$('.help-block').length === 0,
+    'error message is not shown before user interaction'
+  );
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is not there before user interaction'
+  );
+  this.$('input').trigger('focusout');
+  assert.ok(
+    this.$('.help-block').text().trim(), 'error message',
+    'error message is shown after user interaction'
+  );
+  assert.ok(
+    this.$('div').hasClass('has-error'),
+    'errorClass is added after user interaction'
+  );
+  this.set('errors', []);
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is removed when errors empty got empty'
+  );
+});
+
+test('errors are not shown after user interaction but not before (textarea)', function(assert) {
+  this.set('errors', ['error message']);
+  this.render(hbs `{{fm-field type='textarea' errors=errors}}`);
+  assert.ok(
+    this.$('.help-block').length === 0,
+    'error message is not shown before user interaction'
+  );
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is not there before user interaction'
+  );
+  this.$('textarea').trigger('focusout');
+  assert.ok(
+    this.$('.help-block').text().trim(), 'error message',
+    'error message is shown after user interaction'
+  );
+  assert.ok(
+    this.$('div').hasClass('has-error'),
+    'errorClass is added after user interaction'
+  );
+  this.set('errors', []);
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is removed when errors empty got empty'
+  );
+});
+
+test('errors are not shown after user interaction but not before (select)', function(assert) {
+  this.set('errors', ['error message']);
+  this.render(hbs `{{fm-field type='select' errors=errors}}`);
+  assert.ok(
+    this.$('.help-block').length === 0,
+    'error message is not shown before user interaction'
+  );
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is not there before user interaction'
+  );
+  this.$('select').trigger('focusout');
+  assert.ok(
+    this.$('.help-block').text().trim(), 'error message',
+    'error message is shown after user interaction'
+  );
+  assert.ok(
+    this.$('div').hasClass('has-error'),
+    'errorClass is added after user interaction'
+  );
+  this.set('errors', []);
+  assert.notOk(
+    this.$('div').hasClass('has-error'),
+    'errorClass is removed when errors empty got empty'
+  );
+});