简介
ngx-mask 是一个可以用于 Angular 应用的 npm 包，用于提供一个灵活、易于配置的输入框掩码。它可以被用于电子邮件、电话号码、日期、时间等输入的验证与控制。
安装
像所有的 npm 包一样，通过以下命令来安装 ngx-mask：
--- ------- -------- ------
使用示例
在 NgModule 中导入 ngx-mask
为使 ngx-mask 与 Angular 的模块系统对应工作，我们需要在 NgModule 中导入 NgxMaskModule：
------ - ------------- - ---- ---------- ----------- -------- - ------------- - -- ------ ----- --------- - -
应用 ngx-mask 的掩码
在 Angular 组件中，可以通过引入 IMaskModule 接口来初始化掩码。在模板（html）中的表单控件上，你可以使用 mask 属性来应用掩码：
------ ----------- ------------------------
此表单控件将会被限制只允许输入电话号码格式的字符。如果用户输入一个无效的字符，例如字母，则它不会被显示在输入框里面。
动态掩码
你也可以动态地应用掩码。你可以在控制器中定义一个变量，再把它绑定到掩码上，如下所示：
------ ----------- ----------------
------ ----- ------------ - ------ - ----------- -- ------------ -
如果你想要在运行时来改变掩码，你可以通过在 Angular 控制器中修改 myMask 变量来实现。
校验器
除了掩码之外，还有许多校验器可以与 ngx-mask 一起使用。如注入 IMaskPlugin 对象：
------ ----- ------------ -
---- - -
----- --------------
-
------- - -
--- ---------------
-
-结论
ngx-mask 是 Angular 最为流行的表单掩码解决方案之一。使用 ngx-mask 可以大大地减轻输入校验的工程量，同时提高输入控件的友好度。鉴于它的易用性和灵活性，值得我们在 Angular 应用中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/62064