feat(validation): add error list to md-select

[Ullfis]

[Ullfis]

html

<template>
  <md-colors
    md-primary-color="#627ebe"
    md-accent-color="#62be7e">
  </md-colors>
  <require from="../node_modules/materialize-css/dist/css/materialize.css"></require>

  <div class="container">

    <div class="row">
      <div class="col s12">
        <md-input
          md-label="First Name"
          md-value.bind="firstName & validate:rules"
          md-validate="true"
          md-validate-success="good"
          md-validate-error="aiai">
        </md-input>

        <md-input
          md-label="Last Name"
          md-placeholder="Last Name"
          md-validate-success="good"
          md-value.bind="lastName & validate:rules">
        </md-input>

        <md-input
          md-type="email"
          md-label="HTM5 email validation"
          md-validate="true"
          md-validate-success="good"
          md-validate-error="Not a valid email"
          md-value.bind="email">
        </md-input>

        <select md-select="label: My select label;" 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>
    </div>

    <div style="margin-top: 15px;">
      <button md-waves md-button click.delegate="validateModel()">validate</button>
    </div>

    <h5>${message}</h5>

    <ul style="margin-top: 15px;" show.bind="controller.errors.length">
      <li repeat.for="error of controller.errors">
        <a href="#" click.delegate="error.target.focus()">
          ${error.message}
        </a>
      </li>
    </ul>

  </div>
</template>

js

import { inject, NewInstance } from 'aurelia-framework';
import { ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge';

@inject(NewInstance.of(ValidationController))
export class App {
  message = '';
  firstName = '';
  lastName = 'Doe';
  email = '';
  selectedValue = '';

  controller = null;

  rules = ValidationRules
    .ensure('firstName').required().withMessage('First name is required')
    .ensure('lastName')
      .minLength(4)
      .required()
      .email()
    .ensure('selectedValue')
      .required()
      .rules;


  constructor(controller: ValidationController) {
    this.controller = controller;
    this.controller.addRenderer(new MaterializeFormValidationRenderer());
  }

  validateModel() {
    this.controller.validate().then(v => {
      if (v.length === 0) {
        this.message = 'All is good!';
      } else {
        this.message = 'You have errors!';
      }
    });
  }

}

[coveralls]

Coverage remained the same at 95.154% when pulling 4ccb4a9 on Ullfis:validation-select into ddacfbd on aurelia-ui-toolkits:master.

[Thanood]

@MaximBalaganskiy and you seem to practice some kind of mind reading, right? 😏
Does this validate on blur?

[MaximBalaganskiy]

Can't check at the moment, but I bet no. Like you said, original control
never blurs and I see no fixes to that

On 2 Sep 2016 11:32 PM, "Daniel Bendel" notifications@github.com wrote:

@MaximBalaganskiy https://github.com/MaximBalaganskiy and you seem to
practice some kind of mind reading, right? 😏
Does this validate on blur?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#250 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADimvBiub2JNxKBe2CLOwOZAV3h4WVsTks5qmCVogaJpZM4Jzm_e
.

[Ullfis]

issu.. mind reading is right.

Label on select was an excellent addition! And since I already was into the validation stuff, my keyboard wouldn't stop typing.

nope. no blur event attached to this. Maybe try sent an event from the input control.

[Ullfis]

https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/select/select.js#L44

$(wrapper.children('input.select-dropdown')[0]).on('blur', this.handleBlur);

something around there