@Directive ({
selector: 'input[uppercase]',
// When the user updates the input
host: { '(input)': 'onChange($event.target.value.toUpperCase())' }
})
export class UppercaseValueAccessor extends DefaultValueAccessor {
(...)
// When the code updates the value of the
// property bound to the input
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value.toUpperCase());
}
}
}
8 回答
正如@Eric Martinez建议的那样,您可以创建一个本地模板变量,并将大写字符串绑定到输入事件的value属性:
或者,您可以将其作为指令:
要使用该指令,请在组件的指令列表中指定
UpperCaseText
:Demo Plnkr
Simple code without directives
在输入文本的blur事件中,调用一个将值更改为大写的方法,我的名为“cambiaUpper”
在组件(yourComponentFile.ts)中创建接收事件的此方法,从事件中获取值并将其更改为大写 .
田田!
这是我的解决方案:
使用主机侦听器侦听输入事件,然后强制它为大写 .
使用此指令,您可以轻松地将输入强制为大写,如下所示:
我将创建一个ControlValueAccessor的自定义实现 . 后者将对应于将监听主机的输入事件的指令 . 这样,您就可以将用户填写的内容大写 . 控件将自动包含大写的值 .
这是实施:
不要忘记在指令提供程序中注册此自定义值访问器 . 这样,您将使用自定义值访问器而不是默认值 .
并在要使用此方法的组件的directives属性中添加该指令 .
有关详细信息,请参阅此课程:
此链接可以提供其他提示(请参阅“与NgModel兼容的组件”部分):
至少根据我的经验,我发现这里的两个答案很有见地,但不是自己工作:from Thierry Templier(还有第一条评论)和from cal .
我将两者的部分组合在一起,并提出了这个版本,它现在以反应形式使用Angular 4.1.1:
这是小写的,但一切都适用于大写,只需重命名指令,在
selector
和transformValue
内替换 .Edit:
使用此类指令的HTML代码中的直接用法示例:
pixelbits提供了一个很好的解决方案,但它在最新版本的Angular(v4.3.1)中不起作用,因为指令是从组件中折旧的 . 我的解决方案仅基于他的答案,但与最新的一起使用
我提供了一个带有自定义属性指令的通用解决方案,带有一个布尔输入,如果它是真的,它将把输入转换为大写 .
upper-case.directive.ts:
这是带有模板的相应App组件 .
app.ts
这是一个Plnkr,它证明了这一点 .
这是我更通用的解决方案,基本上类似于DefaultValueAccessor,添加了文本“变换器”功能 . 所以你会用
在你的组件中你有大写的功能(你可以做大写旁边的其他事情,比如实现一个掩码)...
指示...
这是我正在使用angular4的工作代码
这是你的大写指令
这是您使用大写指令的html文件代码