我使用aurelia-validation插件创建了一个完美的输入表单。 现在我创建了一个自定义元素来替换输入类型文本框。 我尝试通过使用" validate"设置value属性来验证新的自定义元素值。 keyword - 但自定义元素输入值未经过验证。 似乎验证控制器没有绑定到自定义元素。 验证控制器的绑定数组不包含自定义元素。 也许这与应该触发验证的操作有关(模糊\焦点输出),所以我添加了模糊事件的调度,但它仍然无法正常工作。如上所述 - 当它是常规元素时,它工作得很好。 这是相关的代码(删除了不需要的代码): 自定义元素模板:
<template>
<label>
${title}<input name.bind="fieldName"
title.bind="title" focusout.trigger="focusoutAction()" />
</label>
</template>
自定义元素相关的viewmodel代码:
@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();
}
相关容器(父)视图代码:
<form-input name="firstName" id="firstName" title="First Name" bind-
value="registration.firstName & validate" field-name="firstName" on-
focusout.call="validateInput()" />
相关的viewmodel代码:
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 !!!!!
}