Aurelia验证没有绑定到文本框组件
Aurelia validation not binding to textbox component
我制作了一个简单的文本框组件,它只包装了一些样式以及标签和文本框的组合。当我尝试使用典型的绑定语法将验证绑定到此控件时,模糊功能不会导致验证执行。
组件视图如下:
<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>
数据绑定按预期工作,但验证绑定不工作。
元素需要触发一个blur事件。因为你的元素是自定义的,所以你需要添加代码来在它"模糊"时触发它。在你的例子中,这很简单,在你的自定义元素模板中只有一个可聚焦的元素。
下面是一个例子: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
相关文章:
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- React重新渲染但未显示正确的组件
- onkeyup无法动态创建多个文本区域
- Bootstrap 3的就地文本编辑组件
- 引导组件将文本分组在框中
- 如何在 Angular2 组件中访问代码镜像文本区域值
- ReactJS:我该怎么做,我正确地使用这个文本输入组件
- 在 ExtJS 组件中显示富文本
- 将省略号放在反应 svg 文本组件上
- 如何在 Web 组件中设置标签的内部文本
- 在bar组件的前后添加文本
- Ng-bind-html不显示表单组件,如文本框,按钮
- Aurelia验证没有绑定到文本框组件
- Angular js文本Angular组件事件上键
- 如何正确构建角度 1.5 文本框组件
- 在javascript中添加一个带有文本组件的li元素