Angular 2输入自定义管道

时间:2016-06-02 23:27:55

标签: javascript angular

有没有办法在Angular 2中的输入文本中使用货币或自定义管道?

我试过这个:

<input [(ngModel)]="order.price | currency"/>

但没有成功

2 个答案:

答案 0 :(得分:3)

即使在角度1中,也无法在输入中使用管道。

您正在寻找的是掩码指令。 对于angular1,有很多指令,如ngMaskangular-input-masks和其他指令。

Angular2现在正在发布候选版本(06/02/2016),因此只有少数&#34;指令&#34;。

您还可以构建自己的蒙版组件。

答案 1 :(得分:2)

我已经能够使用angular2-text-masktext-mask-addons来转换输入文本字段值的格式。文档和相关信息非常详尽,可以在text-mask demo page上看到货币示例。

虽然我没有尝试过,this ngconsultant blog post讨论了一种使用某种限制(浏览器原生的焦点/模糊方法)@HostListener技术来调整输入值的技术。

无论使用哪种方法,您都必须警惕是否要简单地转换输入以使UI对用户更友好,或者如果您想利用/保留仅绑定到数据模型的正确格式化输入零件。

关于前者,如果要在使用,存储或传递之前删除应用于输入的格式,则需要在组件代码或管理的其他服务中执行额外的工作/代码/干预数据模型,用于解析从输入值绑定的数据格式。

this stackoverflow post中讨论了一个非常基本的解决方案。)