Merge pull request #70 from offirgolan/validation-hooks

Validation hooks
ember-bootstrap · Mar 21, 2016 · cee5ba8 · cee5ba8
2 parents 770dbf3 + 5f4c6b4
commit cee5ba8
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 20 deletions.
diff --git a/addon/components/bs-form-element.js b/addon/components/bs-form-element.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
 import FormGroup from 'ember-bootstrap/components/bs-form-group';
 import Form from 'ember-bootstrap/components/bs-form';
 
-const { computed } = Ember;
+const { computed, defineProperty } = Ember;
 
 const nonTextFieldControlTypes = Ember.A([
   'checkbox',
@@ -108,6 +108,8 @@ const nonTextFieldControlTypes = Ember.A([
  @public
  */
 export default FormGroup.extend({
+  classNameBindings: ['isValidating'],
+
   /**
    * Text to display within a `<label>` tag.
    *
@@ -277,6 +279,16 @@ export default FormGroup.extend({
    */
   hasValidator: computed.notEmpty('model.validate'),
 
+  /**
+   * Set a validating state for async validations
+   *
+   * @property isValidating
+   * @type boolean
+   * @default false
+   * @public
+   */
+  isValidating: false,
+
   /**
    * If `true` form validation markup is rendered (requires a validatable `model`).
    *
@@ -304,8 +316,8 @@ export default FormGroup.extend({
    * @type string
    * @protected
    */
-  validation: computed('hasErrors', 'hasValidator', 'showValidation', function() {
-    if (!this.get('showValidation') || !this.get('hasValidator')) {
+  validation: computed('hasErrors', 'hasValidator', 'showValidation', 'isValidating', function() {
+    if (!this.get('showValidation') || !this.get('hasValidator') || this.get('isValidating')) {
       return null;
     }
     return this.get('hasErrors') ? 'error' : 'success';
@@ -449,6 +461,15 @@ export default FormGroup.extend({
     return `components/form-element/${formLayout}/${inputLayout}`;
   }),
 
+  /**
+   * Setup validation properties. This method acts as a hook for external validation
+   * libraries to overwrite.
+   *
+   * @method setupValidations
+   * @public
+   */
+  setupValidations: Ember.K,
+
   /**
    * Listen for focusOut events from the control element to automatically set `showValidation` to true to enable
    * form validation markup rendering.
@@ -463,8 +484,8 @@ export default FormGroup.extend({
   init() {
     this._super();
     if (!Ember.isBlank(this.get('property'))) {
-      Ember.Binding.from(`model.${this.get('property')}`).to('value').connect(this);
-      Ember.Binding.from(`model.errors.${this.get('property')}`).to('errors').connect(this);
+      defineProperty(this, 'value', computed.alias(`model.${this.get('property')}`));
+      this.setupValidations();
     }
   }
 });
diff --git a/addon/components/bs-form.js b/addon/components/bs-form.js
@@ -138,6 +138,20 @@ export default Ember.Component.extend({
     return view instanceof FormElement;
   }),
 
+  /**
+   * Validate hook that will return a promise that will either resolve if the model is valid
+   * or reject if it's not.
+   *
+   * @param Object model
+   * @return Promise
+   * @public
+   */
+  validate(/* model */) {
+    Ember.deprecate('[ember-bootstrap] Validation support has been moved to 3rd party addons.\n' +
+                    'ember-validations: https://github.com/kaliber5/ember-bootstrap-validations\n' +
+                    'ember-cp-validations: https://github.com/offirgolan/ember-bootstrap-cp-validations\n', false);
+  },
+
   /**
    * Submit handler that will send the default action ("action") to the controller when submitting the form.
    *
@@ -153,21 +167,17 @@ export default Ember.Component.extend({
     if (e) {
       e.preventDefault();
     }
+
     if (!this.get('hasValidator')) {
       return this.sendAction();
     } else {
-      return this
-        .get('model')
-        .validate()
-        .then(() => {
-          if (this.get('model.isValid')) {
-            return this.sendAction();
-          }
-        })
-        .catch(() => {
+      let validationPromise = this.validate(this.get('model'));
+      if (validationPromise && validationPromise instanceof Ember.RSVP.Promise) {
+        validationPromise.then(() => this.sendAction(), () => {
           this.get('childFormElements').setEach('showValidation', true);
           return this.sendAction('invalid');
         });
+      }
     }
   },
 
@@ -177,4 +187,4 @@ export default Ember.Component.extend({
       this.$().submit();
     }
   }
-});
+});
diff --git a/addon/config.js b/addon/config.js
@@ -1,17 +1,21 @@
-let Config = {
+import Ember from 'ember';
+
+const Config = Ember.Object.extend();
+
+Config.reopenClass({
   formValidationSuccessIcon: 'glyphicon glyphicon-ok',
   formValidationErrorIcon: 'glyphicon glyphicon-remove',
   formValidationWarningIcon: 'glyphicon glyphicon-warning-sign',
   formValidationInfoIcon: 'glyphicon glyphicon-info-sign',
   insertEmberWormholeElementToDom: true,
 
-  load(config) {
-    for (let property in this) {
-      if (this.hasOwnProperty(property) && typeof this[property] !== 'function' && typeof config[property] !== 'undefined') {
+  load(config = {}) {
+    for (let property in config) {
+      if (this.hasOwnProperty(property) && typeof this[property] !== 'function') {
         this[property] = config[property];
       }
     }
   }
-};
+});
 
 export default Config;