ngx-input-mask

Input mask directive for angular

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ngx-input-mask
062.0.42 years ago5 years agoMinified + gzip package size for ngx-input-mask in KB

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 MASKTEMPLATES 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

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

License

Licensed under MIT license.