Package Exports

ngx-input-mask

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-input-mask) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-input-mask

Simple input mask directive for angular.

ngx-input-mask npm version supported node version for ngx-input-mask total npm downloads for ngx-input-mask monthly npm downloads for ngx-input-mask npm licence for ngx-input-mask

Simple usage

Just import in AppModule:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { InputMaskModule } from "ngx-input-mask";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, InputMaskModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

In HTML:

<input
  type="text"
  inputMask="+7 (000) 000-00-00"
  [(ngModel)]="phone"
  name="phone"
/>

Advanced options

To create custom templates override MASK_TEMPLATES value:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import {
  InputMaskModule,
  MaskTemplates,
  MASK_TEMPLATES,
  DEFAULT_MASK_TEMPLATES,
} from "ngx-input-mask";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, InputMaskModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: MASK_TEMPLATES,
      useValue: {
        ...DEFAULT_MASK_TEMPLATES,
        H: /[ABCEHKMOPTXY]/, // Russian car license plate
        // Put your templates here (NOTICE: There allows keys 1 letter only!)
      } as MaskTemplates,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Then you can use it:

<input
  type="text"
  inputMask="H 000 HH 000"
  [(ngModel)]="licensePlate"
  name="licensePlate"
/>

If you need to use symbol but it reserved by template, just use it:

<input
  type="text"
  inputMask="H 000 H\H 000"
  [(ngModel)]="licensePlate"
  name="licensePlate"
/>

TODOS

Multiple masks - it will allow to flexibly switch between masks when writing
Function mask

License

Licensed under MIT license.