带有自定义元素的 aurelia-validation

Guy*_*y E 5 custom-element aurelia

我用 aurelia-validation 插件创建了一个输入表单,它工作得很好。现在我创建了一个自定义元素来替换输入类型文本框。我正在尝试通过使用“validate”关键字设置 value 属性来验证新的自定义元素值 - 但未验证自定义元素输入值。似乎验证控制器没有绑定到自定义元素。验证控制器的 bindings 数组不包含自定义元素。 也许这与应该触发验证的操作(blur\focus out)有关,所以我添加了 blur 事件的调度,但它仍然不起作用。如前所述 - 当它是一个常规元素时,它工作得很好。 这是相关代码(不需要的代码已删除):自定义元素模板:

<template>
    <label>
        ${title}<input name.bind="fieldName" 
        title.bind="title" focusout.trigger="focusoutAction()" />
    </label>
</template>
Run Code Online (Sandbox Code Playgroud)

自定义元素相关的视图模型代码:

 @bindable onFocusout;
 ...
 bind(bindingContext) {
 var input = this.element.getElementsByTagName("input")[0];
 input.type = this.customType || "text";
 input.placeholder = this.placeHolder || "";
 //input.value.bind = bindingContext.registration.firstName & validate;
 }
 ...
 focusoutAction() {
   var customEvent = new CustomEvent("blur");
   this.element.dispatchEvent(customEvent);
   this.onFocusout(); 
 }
Run Code Online (Sandbox Code Playgroud)

相关容器(父)视图代码:

<form-input name="firstName" id="firstName" title="First Name" bind-
value="registration.firstName & validate" field-name="firstName" on-
focusout.call="validateInput()" />
Run Code Online (Sandbox Code Playgroud)

以及相关的视图模型代码:

ValidationRules
.ensure(r => r.firstName).displayName('first 
name').required().withMessage(`\${$displayName} cannot be blank`)
.satisfiesRule('FirstNameValidation')
.ensure(r => r.lastName).displayName('last 
name').required().withMessage(`\${$displayName} cannot be blank`)
.satisfiesRule('LastNameValidation')

validateInput() { this.getValidationError(event.target.name); }

getValidationError(propertyName) {
let error = this.getValidationFirstError(propertyName);
....
}
getValidationFirstError(propertyName) 
{
  if (this.controllerToValidate.errors !== null && 
  this.controllerToValidate.errors.length > 0) //This is 0 !!!!!
}
Run Code Online (Sandbox Code Playgroud)