介绍
ng2-inputmask 是一个基于 Angular 2 的输入格式控制库，它可以让你方便地定义某个输入框的格式要求，比如日期、电话号码、邮编等等。它基于 Inputmask.js 库实现，使用简单方便，是非常实用的工具。
在本文中，我们将详细介绍如何使用 ng2-inputmask 库，并以实例代码为例加深大家对其使用方法的理解。
安装
使用 npm 安装 ng2-inputmask：
--- ------- ------------- ------
然后在你的模块中引入：
------ - -------- - ---- ---------------- ------ - --------------- - ---- ---------------- ----------- -------- - --------------- - -- ------ ----- -------- --
使用
使用 ng2-inputmask 很简单，你只需要在模板中给相应的元素加上 inputmask 属性就可以了：
------ ----------- ------------------------ --
这个例子实现了一个日期输入框，输入框的格式要求是 dd/MM/yyyy。ng2-inputmask 会自动对用户输入进行格式控制，保证输入框内容符合要求。
ng2-inputmask 支持很多格式控制，你可以参考官方文档来了解更多的格式控制方式和语法。
示例
下面我们来看一个完整的实例代码。这个例子实现了一个电话号码输入框，要求电话号码的格式为 (999) 999-9999。
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ------
--------- -
---------------
------ ----------- ---------------------------- ----------------- ---------- --
------- ------------------------------
-
--
------ ----- ------------ -
------------ - --- ----------------
-------- -
-------------------------------------
-
-这个例子中，我们使用了 Angular 的表单模块，创建了一个 FormControl 实例来跟踪输入框的值。在模板中，我们把这个 FormControl 实例绑定到了电话号码输入框上，并使用了 ng2-inputmask 的格式控制能力。
当用户输入台湾的电话号码时，ng2-inputmask 会自动对其进行格式控制，确保输入的电话号码符合要求。当用户点击提交按钮时，我们可以通过 this.phoneControl.value 获取到输入框中的值。
总结
ng2-inputmask 为我们提供了一种非常灵活方便的输入格式控制方法，如果你在开发中需要对输入框的格式进行控制，那么非常推荐使用它。在本文中，我们介绍了如何安装、引入和使用 ng2-inputmask，并结合实例代码进行了演示。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056ccb81e8991b448e6545