Проверка 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> 

И ViewModel выглядит следующим образом:

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