Проверка Aurelia не привязана к компоненту текстового поля

Question

Я сделал простой компонент текстового поля, который просто обертывает некоторые стили и сочетание метки и текстового поля. Когда я пытаюсь привязать проверку к этому элементу управления с использованием типичного синтаксиса привязки, функциональность размытия не вызывает выполнение проверки.

Вид компонента выглядит так:

<template>
    <div class="form-field">
        <div class="form-field__label">
            ${label}
            <input name.bind="name" id.bind="name" class="form-field__input" type.bind="type" value.bind="value" tabindex.bind="tabIndex"></input>
        </div>
    </div>
</template>

И модель представления выглядит так:

import {bindable, bindingMode} from 'aurelia-framework';

export class Textbox {
    @bindable({defaultBindingMode: bindingMode.twoWay}) value : string;
    @bindable label : string;
    @bindable type : string = "textbox";
    @bindable tabIndex: number;
    @bindable hidden : boolean;
    @bindable name : string = '';
}

И компонент используется так:

<textbox value.bind="emailAddress & validate" type="email"></textbox>

Привязка данных работает должным образом, но привязка проверки не работает. Любые идеи приветствуются.

Answer 1

Элемент должен запустить событие размытия. Поскольку ваш элемент нестандартный, вам нужно добавить код для его запуска, когда он "размывается". В вашем случае это довольно просто, в шаблоне вашего пользовательского элемента есть только один фокусируемый элемент.

Вот пример: https://gist.run/?id=06bda9ac6e068ad21dab7b470f69c566

textbox.html

<template>
  <div class="form-field">
    <div class="form-field__label">
      ${label}
      <input name.bind="name"
             id.bind="name"
             class="form-field__input"
             type.bind="type"
             value.bind="value"
             tabindex.bind="tabIndex"
             blur.trigger="blur()">
    </div>
  </div>
</template>

textbox.js

import {bindable, bindingMode, DOM, inject} from 'aurelia-framework';

@inject(Element)
export class Textbox {
  @bindable({defaultBindingMode: bindingMode.twoWay}) value: string;
  @bindable label: string;
  @bindable type: string = "textbox";
  @bindable tabIndex: number;
  @bindable hidden: boolean;
  @bindable name: string = '';
  element: Element;

  constructor(element) {
    this.element = element;
  }

  blur() {
    this.element.dispatchEvent(DOM.createCustomEvent('blur'));
  }
}

Мы добавим это в документы: https://github.com/aurelia/validation/issues/297