简介
@saritasa/ngx-text-mask 是一个基于 Angular 框架的 npm 包，用于给输入框添加掩码，以适应一些特殊的输入需求，比如金钱、日期、电话号码等等。
本文将解释如何使用该 npm 包。
安装
使用 npm 命令安装该 npm 包：
npm install @saritasa/ngx-text-mask
使用
首先，在需要使用掩码的组件中导入 TextMaskModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ - -------------- - ---- --------------------------
-----------
-------- -
-------------
------------
--------------
--
------------- --------------
-------- -------------
--
------ ----- -------- - -然后，引入 TextMaskDirective 并设置掩码属性：
<input type="text" textMask [textMask]="{mask: mask}" [(ngModel)]="myModel">其中，mask 为掩码字符串，具体如下：
- 数字掩码：
{mask: [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/]}表示输入类似“12-34-56”的数字； - 日期掩码：
{mask: [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}, guide: false}表示输入 yyyy-mm-dd 格式的日期，且不会出现“-12-34”这样的错误输入； - 电话掩码：
{mask: ['(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], keepCharPositions: true}表示输入类似“(123)456-7890”的电话。
注意，在组件中需要定义掩码 mask 和绑定 ngModel，以动态地获取输入框内容。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- -
--------- ---- ---------
------- --------- ---------
------ ----------- -------- ------------------ ------ ----------------------
-
--
------ ----- ----------- -
-------- -------
----- ------
---------- -
--------- - ------ ----- ---- ----- ----- ---- ----- ------
-
-本例实现了在输入框中输入 “12-34-56” 格式的数字。
总结
使用 @saritasa/ngx-text-mask 可以轻松地实现输入框上的掩码功能，使得用户输入符合特定的格式要求。当然，掩码的格式也需要开发者根据业务需求来设定，以达到最佳的用户体验效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cca81e8991b448e653e