ngx-mask

What is ngx-mask?

ngx-mask is an Angular library that provides input masking capabilities. It allows developers to define patterns for input fields, ensuring that users enter data in a specific format. This is particularly useful for fields like phone numbers, dates, and credit card numbers.

What are ngx-mask's main functionalities?

Basic Input Masking

This feature allows you to apply a basic mask to an input field. In this example, the input field will only accept numbers in the format of '0000-0000-0000-0000', which is useful for credit card numbers.

<input type='text' mask='0000-0000-0000-0000' />

Date Masking

This feature allows you to apply a date mask to an input field. The input field will only accept dates in the format of 'DD/MM/YYYY'.

<input type='text' mask='00/00/0000' />

Custom Masking

This feature allows you to create custom masks. In this example, the input field will accept a pattern like 'A0A 0A0', which is useful for postal codes.

<input type='text' mask='A0A 0A0' />

Dynamic Masking

This feature allows you to apply a mask dynamically based on a variable. The 'dynamicMask' variable can be changed at runtime to apply different masks.

<input type='text' [mask]='dynamicMask' />

Other packages similar to ngx-mask

text-mask

text-mask is a library that provides input masking for various frameworks including Angular, React, and Vue. It offers similar functionality to ngx-mask but is more versatile as it supports multiple frameworks.

cleave.js

cleave.js is a JavaScript library for formatting input fields. It supports a wide range of input types including credit card numbers, phone numbers, and dates. Compared to ngx-mask, cleave.js offers more built-in formats and is framework-agnostic.

imask

imask is a versatile input masking library that supports a wide range of input types and custom masks. It is similar to ngx-mask but offers more advanced features like dynamic mask changing and custom mask definitions.

README

NGX MASK

NGX MASK is the best directive to solve masking input with needed pattern

You can also try our NGX LOADER INDICATOR check. You can also try our NGX COPYPASTE check.

You can try live documentation with examples

Installing

Angular version 17.x.x

$ npm install --save ngx-mask

Angular version 16.x.x

$ npm install --save ngx-mask@16.4.2

Angular version 15.x.x

$ npm install --save ngx-mask@15.2.3

Angular version 14.x.x

$ npm install --save ngx-mask@14.3.3

Angular version 13.x.x or 12.x.x

$ npm install --save ngx-mask@13.2.2

Quickstart if ngx-mask version >= 15.0.0

Import ngx-mask directive, pipe and provide NgxMask providers with provideNgxMask function.

With default config options application level

bootstrapApplication(AppComponent, {
    providers: [
        (...)
        provideEnvironmentNgxMask(),
        (...)
    ],
}).catch((err) => console.error(err));

Passing your own mask config options

import { NgxMaskConfig } from 'ngx-mask'

const maskConfig: Partial<NgxMaskConfig> = {
  validation: false,
};

bootstrapApplication(AppComponent, {
    providers: [
        (...)
        provideEnvironmentNgxMask(maskConfig),
        (...)
    ],
}).catch((err) => console.error(err));

Using a function to configure:

const maskConfigFunction: () => Partial<NgxMaskConfig> = () => {
  return {
    validation: false,
  };
};

bootstrapApplication(AppComponent, {
    providers: [
         (...)
         provideEnvironmentNgxMask(maskConfigFunction),
         (...)
],
}).catch((err) => console.error(err));

With config options feature level

@Component({
    selector: 'my-feature',
    templateUrl: './my-feature.component.html',
    styleUrls: ['./my-feature.component.css'],
    standalone: true,
    imports: [NgxMaskDirective, (...)],
    providers: [
          (...)
          provideNgxMask(),
          (...)
    ],
})
export class MyFeatureComponent {}

Then, import directive, pipe to needed standalone component and just define masks in inputs.

With Angular modules

@NgModule({
  imports: [
      NgxMaskDirective, NgxMaskPipe
  ],
  providers: [provideNgxMask()]
})

Quickstart if ngx-mask version < 15.0.0

For version ngx-mask < 15.0.0 Import ngx-mask module in Angular app.

With default mask config options

import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'

export const options: Partial<null | NgxMaskConfig> | (() => Partial<NgxMaskConfig>) = null;

@NgModule({
  imports: [
    NgxMaskModule.forRoot(),
  ],
})

Passing in your own mask config options

import { NgxMaskModule, NgxMaskConfig } from 'ngx-mask'

const maskConfig: Partial<NgxMaskConfig> = {
  validation: false,
};

@NgModule({
  imports: [
    NgxMaskModule.forRoot(maskConfig),
  ],
})

Or using a function to get the config:

const maskConfigFunction: () => Partial<NgxMaskConfig> = () => {
  return {
    validation: false,
  };
};

@NgModule({
  imports: [
    NgxMaskModule.forRoot(maskConfigFunction),
  ],
})

Then, just define masks in inputs.

Usage

Text documentation

Contributing

We would love some contributions! Check out this document to get started.