npm 包 ngx-mask 使用教程

简介

ngx-mask 是一个可以用于 Angular 应用的 npm 包，用于提供一个灵活、易于配置的输入框掩码。它可以被用于电子邮件、电话号码、日期、时间等输入的验证与控制。

安装

像所有的 npm 包一样，通过以下命令来安装 ngx-mask：

npm install ngx-mask --save

使用示例

在 NgModule 中导入 ngx-mask

为使 ngx-mask 与 Angular 的模块系统对应工作，我们需要在 NgModule 中导入 NgxMaskModule：

import { NgxMaskModule } from 'ngx-mask'

@NgModule({
  imports: [ NgxMaskModule ]
})
export class AppModule { }

应用 ngx-mask 的掩码

在 Angular 组件中，可以通过引入 IMaskModule 接口来初始化掩码。在模板（html）中的表单控件上，你可以使用 mask 属性来应用掩码：

<input type="text" [mask]="'000-000-0000'">

此表单控件将会被限制只允许输入电话号码格式的字符。如果用户输入一个无效的字符，例如字母，则它不会被显示在输入框里面。

动态掩码

你也可以动态地应用掩码。你可以在控制器中定义一个变量，再把它绑定到掩码上，如下所示：

<input type="text" [mask]="myMask">

export class AppComponent {
  myMask = '000-0000'; // 假设这里是动态获取的掩码
}

如果你想要在运行时来改变掩码，你可以通过在 Angular 控制器中修改 myMask 变量来实现。

校验器

除了掩码之外，还有许多校验器可以与 ngx-mask 一起使用。如注入 IMaskPlugin 对象：

export class AppComponent {
  mask = {
    mask: '000-000-0000'  
  }
  plugins = {
      pl: IMask.EmailMask
  }
}

结论

ngx-mask 是 Angular 最为流行的表单掩码解决方案之一。使用 ngx-mask 可以大大地减轻输入校验的工程量，同时提高输入控件的友好度。鉴于它的易用性和灵活性，值得我们在 Angular 应用中使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62064