在前端开发中，输入框的输入格式通常需要通过正则表达式等方式进行校验和格式化。而 ng-input-masks 是一个帮助我们轻松实现输入框格式化的 npm 包，本文将带大家了解如何使用它。
什么是 ng-input-masks
ng-input-masks 是一个基于 AngularJS 的输入框格式化工具，它可以让我们轻松地在输入框中加入格式限制，如电话号码、银行卡号码、日期等等。
ng-input-masks 使用方法
安装
在使用 ng-input-masks 之前，我们需要先将它安装到我们的项目中。可以通过以下命令进行安装：
npm install ng-input-masks --save
引入
在安装完成后，需要在我们的项目中引入 ng-input-masks，可以在 HTML 文件中添加以下代码：
<script src="node_modules/ng-input-masks/dist/ng-input-masks.min.js"></script>
使用
在项目中要使用 ng-input-masks，必须先将它注入到我们的 AngularJS 模块中。可以在代码中像这样引入：
angular.module('myApp', ['ng-input-masks']);接下来，我们就可以在 HTML 文件中使用它了。以下示例将演示如何实现一个电话号码格式化的输入框：
<input type="text" ng-model="phoneNumber" ui-mask="(999) 999-9999">
上述代码使用了 ui-mask 属性来设置输入框的格式。其中，使用了圆括号、连字符和数字来设定电话号码的格式。这个格式化符号表达式可以实现对电话号码输入的格式限制。
除了电话号码格式化，还可以使用其他格式化方式。下面是一个设置日期格式的示例代码：
<input type="text" ng-model="date" ui-mask="99-99-9999">
以上代码使用了短横线和数字来实现日期格式的限制。
ng-input-masks 的进阶使用
在实际的开发中，我们有时需要更加复杂的输入框格式限制。比如，在输入纯数字时，需要按照千位分隔符来显示。这个时候可以使用 ng-input-masks 提供的自定义格式化符号表达式。
下面的示例代码演示了如何使用自定义符号表达式来设置数字输入框的格式：
<input type="text" ng-model="number" ui-mask="999999,999">
以上的代码将会实现一个千位分隔符的数字输入框，即每三位数字一组，用逗号进行分隔。
如果希望对输入框的输入做更多的处理，我们可以使用 ng-input-masks 提供的模型转换器 (model transformers)。
模型转换器可以让我们指定一个函数来对输入框中的内容进行转换。比如，我们可以将输入框中的大写字母转化为小写字母，或者将文字转换为数字。
下面是一个示例代码，将输入框中的英文字母全部转为小写：
<input type="text" ng-model="myInput" ui-mask="aaaa" model-transformation="toLowerCase">
上述代码使用了 model-transformation 属性，它指定了一个函数 toLowerCase 来将输入框中的内容转化为小写。
总结
通过本文，我们了解了 npm 包 ng-input-masks 的安装和使用方法，以及如何实现格式限制和自定义格式化符号表达式。我们还通过几个示例代码演示了如何在实现输入框复杂格式化时使用 ng-input-masks 提供的模型转换器。
ng-input-masks 是一个非常方便实用的前端工具，可以帮助我们在开发过程中快速实现输入框格式化的功能。希望能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea981e8991b448dc14f