feat(md-select): show-errortext option

md-select="show-errortext: false; label: ... default true
aurelia-ui-toolkits · Sep 9, 2016 · 69069be · 69069be
1 parent 277f7cf
commit 69069be
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 22 deletions.
diff --git a/sample/src/samples/select/validation.html b/sample/src/samples/select/validation.html
@@ -1,13 +1,42 @@
 <template>
-  <select md-select="label: Don't select anything and click validate;" value.two-way="selectedValue & validate:rules">
-    <option value="" disabled selected>select an item</option>
-    <option value="item1">item 1</option>
-    <option value="item2">item 2</option>
-    <option value="item3">item 3</option>
-    <option value="item4">item 4</option>
-  </select>
-  <div style="margin-top: 15px;">
-    <button md-waves md-button click.delegate="validateModel()">validate</button>
-    <button md-waves md-button click.delegate="reset()">reset</button>
-  </div>
+  <md-card md-title="Basic">
+    <select md-select="label: Don't select anything and click validate" value.two-way="selectedValue & validate:rules">
+      <option value="" disabled selected>select an item</option>
+      <option value="item1">item 1</option>
+      <option value="item2">item 2</option>
+      <option value="item3">item 3</option>
+      <option value="item4">item 4</option>
+    </select>
+    <div style="margin-top: 15px;">
+      <button md-waves md-button click.delegate="validateModel()">validate</button>
+      <button md-waves md-button click.delegate="reset()">reset</button>
+    </div>
+  </md-card>
+
+  <md-card md-title="Show or hide error text">
+    <select md-select="show-errortext.bind: showErrortext; label: Don't select anything and click validate" value.two-way="selectedValue2 & validate:rules">
+      <option value="" disabled selected>select an item</option>
+      <option value="item1">item 1</option>
+      <option value="item2">item 2</option>
+      <option value="item3">item 3</option>
+      <option value="item4">item 4</option>
+    </select>
+    <div style="margin-top: 15px;">
+      <button md-waves md-button click.delegate="validateModel2()">validate</button>
+      <button md-waves md-button click.delegate="reset2()">reset</button>
+    </div>
+    <md-switch style="margin-top: 15px;" md-label-on="show" md-label-off="hide" md-checked.bind="showErrortext"></md-switch>
+  </md-card>
+
+  <md-card if.bind="controller.errors.length">
+    <h5 class="error-text">You have errors!</h5>
+    <ul style="margin-top: 15px;">
+      <li repeat.for="error of controller.errors">
+        <a href="#" click.delegate="error.target.focus()">
+          ${error.message}
+        </a>
+      </li>
+    </ul>
+  </md-card>
+
 </template>
diff --git a/sample/src/samples/select/validation.js b/sample/src/samples/select/validation.js
@@ -5,15 +5,20 @@ import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge';
 @inject(NewInstance.of(ValidationController))
 export class Validation {
   selectedValue = '';
+  selectedValue2 = '';
+  showErrortext = false;
 
   controller = null;
 
   rules = ValidationRules
     .ensure('selectedValue')
+      .displayName('Basic')
       .required()
-      .on(this)
-      .rules;
-
+    .ensure('selectedValue2')
+      .displayName('Show or hide error text')
+      .required()
+    .on(this)
+    .rules;
 
   constructor(controller: ValidationController) {
     this.controller = controller;
@@ -22,15 +27,19 @@ export class Validation {
 
   reset() {
     this.selectedValue = '';
+    this.controller.reset({ object: this, propertyName: 'selectedValue' });
+  }
+
+  reset2() {
+    this.selectedValue2 = '';
+    this.controller.reset({ object: this, propertyName: 'selectedValue2' });
   }
 
   validateModel() {
-    this.controller.validate().then(v => {
-      if (v.length === 0) {
-        this.message = 'All is good!';
-      } else {
-        this.message = 'You have errors!';
-      }
-    });
+    return this.controller.validate({ object: this, propertyName: 'selectedValue' });
+  }
+
+  validateModel2() {
+    return this.controller.validate({ object: this, propertyName: 'selectedValue2' });
   }
 }
diff --git a/src/select/select.js b/src/select/select.js
@@ -4,13 +4,15 @@ import {inject} from 'aurelia-dependency-injection';
 import {TaskQueue} from 'aurelia-task-queue';
 import * as LogManager from 'aurelia-logging';
 import {fireEvent} from '../common/events';
+import {getBooleanFromAttributeValue} from '../common/attributes';
 import {DOM} from 'aurelia-pal';
 
 @inject(Element, LogManager, BindingEngine, TaskQueue)
 @customAttribute('md-select')
 export class MdSelect {
   @bindable() disabled = false;
   @bindable() label = '';
+  @bindable() showErrortext = true;
   _suspendUpdate = false;
   subscriptions = [];
   input = null;
@@ -66,6 +68,17 @@ export class MdSelect {
     this.toggleControl(newValue);
   }
 
+  showErrortextChanged() {
+    this.setErrorTextAttribute();
+  }
+
+  setErrorTextAttribute() {
+    let input = this.element.parentElement.querySelector('input.select-dropdown');
+    if (!input) return;
+    this.log.debug('showErrortextChanged: ' + this.showErrortext);
+    input.setAttribute('data-show-errortext', getBooleanFromAttributeValue(this.showErrortext));
+  }
+
   notifyBindingEngine() {
     this.log.debug('selectedOptions changed', arguments);
   }
@@ -110,6 +123,7 @@ export class MdSelect {
     $(this.element).material_select();
     this.toggleControl(this.disabled);
     this.observeVisibleDropdownContent(true);
+    this.setErrorTextAttribute();
   }
 
   observeVisibleDropdownContent(attach) {

diff --git a/src/validation/validationRenderer.js b/src/validation/validationRenderer.js
@@ -44,8 +44,11 @@ export class MaterializeFormValidationRenderer {
         input.classList.remove('valid');
         input.classList.add('invalid');
         error.target = input;
+        if (!(input.hasAttribute('data-show-errortext') &&
+            input.getAttribute('data-show-errortext') === 'false')) {
+          this.addMessage(selectWrapper, error);
+        }
       }
-      this.addMessage(selectWrapper, error);
       break;
     }
     default: break;