在前端开发的过程中，我们经常需要对用户输入的数据进行格式限制和规范，如手机号、银行卡号等。使用 ng2-input-mask 插件能够轻松地实现数据格式的控制和显示格式的美化。本文将介绍 npm 包 ng2-input-mask 的基本用法，并提供实例代码供学习参考。
安装
要使用 ng2-input-mask 插件，首先需要使用 npm 命令进行安装：
npm install ng2-input-mask --save
使用
安装完成后，在使用时需要导入相应的模块并在 HTML 中添加相应的组件。
导入模块
在 Angular 的模块中，需要导入 ng2-input-mask 的模块。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- -----------------
-----------
-------- -
-------------
---------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -添加组件
在 HTML 的页面中，需要添加 ng2-input-mask 的组件。下面是一个简单的例子，展示了如何使用该插件来规范输入的手机号码：
<input type="text" name="phone" [(ngModel)]="phone" mask="(000) 000-0000" placeholder="(555) 555-1234">
打开页面后，可以看到输入框中自动按照 (000) 000-0000 的格式对输入的数据进行格式化，同时输入框中会默认显示 (555) 555-1234 的数据。
其他格式化方式
除了示例中使用的规范手机号码的方式，ng2-input-mask 还提供了其他格式化方式。具体的规定方式如下：
| 格式选项 | 描述 |
|---|---|
| 0 | 数字 (0-9) |
| 9 | 数字 (0-9) 或空格 |
| # | 数字 (0-9), 加上加括号, 加一个减号 |
| L | 字母 (a-z, A-Z) |
| ? | 字母 (a-z, A-Z) 或空格 |
| A | 字母 (a-z, A-Z) 或数字 (0-9) |
| \ | 转义前缀 |
以美国邮政编码为例，格式化方式可以选择 99999 或是 99999-9999。
下面是一个示例，展示如何使用 ng2-input-mask 定义格式为 99999-9999 的输入框：
<input type="text" name="zip" [(ngModel)]="zip" mask="99999-9999" placeholder="12345-6789">
打开页面时，该输入框中会默认显示 12345-6789。
总结
本文介绍了 npm 包 ng2-input-mask 的基本用法，提供了多种格式化方式以及代码示例。希望能对读者学习 ng2-input-mask 有所帮助，提升前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057ae581e8991b448eb6a3