作为前端开发者,我们通常需要对输入框进行一些特殊的处理,如格式化、校验、限制输入等等。为了方便开发,社区中诞生了很多优秀的 npm 包,其中 ng-input-enhancer 安利用 Angular 框架提供了一套供开发者使用的 input 增强指令和服务,能够帮助开发者快速实现些常用的操作。本文将详细介绍 ng-input-enhancer 的使用方法,并提供相关示例代码。
安装
使用 npm 安装 ng-input-enhancer:
--- ------- ----------------- ------
注意:该包依赖 Angular 和 RxJS,应在项目中引入这两个依赖包。
使用
1. 引入指令
在 Angular 模块中引入 ng-input-enhancer 模块,并将其指令(inputTransaction)添加到需要增强的输入框上:
------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - --------------------- - ---- -------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ----------------------- ---------- -------------- -- ------ ----- --------- --
2. 配置参数
指令 (inputTransaction
)接受一个对象参数,可以在该对象上设置一些选项,如:
- blurFormatting:是否启用失焦时字符格式化。默认值为false。
- maxLength:输入框最大字符数。默认值为0,不限制。
------ ------------------- --------------------- --------------- ----- ---------- -- -- -
3. 使用服务
ng-input-enhancer 还提供了一个服务(InputFormatter
)用于对输入框 value 值进行格式化,该服务可以在组件中注入使用:
------ - --------- - ---- ---------------- ------ - -------------- - ---- -------------------- ------------ --------- ----------- --------- - ----- ------ ------------------- ---------------------- - ------ - -- ------ ----- ------------ - ----- - --- ------------------- --------------- --------------- -- ------------- - ---------- - ------------------------------------------ -- ------ ----- - -
示例
我们来实践一下,假设我们的需求是在输入框中输入一个数字,当值大于 1000 时,将其格式化为千分位形式,并限制最大输入为 10 位。
HTML:
------ ----------- ------------------- --------------------- --------------- ----- ---------- -- -- ---------------------- -
TS:
------ - --------- - ---- ---------------- ------ - -------------- - ---- -------------------- ------------ --------- ----------- --------- - ----- ------ ----------- ------------------- --------------------- --------------- ----- ---------- -- -- ---------------------- - ------ - -- ------ ----- ------------ - ----- - --- -- ------ ------------------- --------------- --------------- -- ------------- - -- ------------------- - ----- - ---------- - ----------------------------------------------- - - -
这样,在输入框中输入大于 1000 的数字,就能自动被格式化为千分位形式。
总结
ng-input-enhancer 离必须有一个顶部包装器,所以它只适用于在浏览器中使用。它的功能还算是比较简单的,但是对于一些常规的需求也能满足,开发者可以通过对源码进行修改来实现得到个性化的需求。
参考
- npm: ng-input-enhancer
- GitHub: ng-input-enhancer
- How to create a currency input in Angular for Brazilian Real with ng-input-enhancer
- Angular 2 Input Formatter
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005539081e8991b448d0c0e