ngx-mask

Angular Plugin to make masks on form fields and html elements.

1,153

299

1,153

View on GitHub View on NPM

Top Related Projects

text-mask

8,264

Input mask for React, Angular, Ember, Vue, & plain JavaScript

cleave.js

17,957

Format input text content when you are typing...

jQuery-Mask-Plugin

4,771

A jQuery Plugin to make masks on form fields and HTML elements.

vanilla-masker

1,291

VanillaMasker is a pure javascript mask input

Quick Overview

The ngx-mask library is a powerful and flexible input mask solution for Angular applications. It provides a set of directives and pipes that allow developers to easily apply input masks to form fields, ensuring consistent and user-friendly data entry.

Pros

Flexible Masking: The library supports a wide range of mask patterns, including numeric, alphanumeric, and custom masks, allowing developers to tailor the input experience to their specific needs.
Reactive Forms Support: ngx-mask seamlessly integrates with Angular's Reactive Forms, making it easy to apply masks to form fields and handle validation.
Cross-browser Compatibility: The library is designed to work across a wide range of modern browsers, ensuring a consistent user experience.
Active Development and Community: The project is actively maintained, with regular updates and a supportive community of contributors.

Cons

Learning Curve: While the library is relatively easy to use, developers may need to spend some time understanding the syntax and configuration options to get the most out of it.
Potential Performance Impact: Depending on the complexity of the masks used, the library may have a slight performance impact on the application, especially in large forms.
Limited Customization: While the library provides a good set of built-in features, developers may find that they need to write custom code to achieve certain advanced masking requirements.
Dependency on Angular: The ngx-mask library is specifically designed for Angular applications and may not be suitable for use in other JavaScript frameworks or libraries.

Code Examples

Applying a Numeric Mask

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { NgxMaskModule } from 'ngx-mask';

@Component({
  selector: 'app-numeric-mask',
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="phoneNumber" mask="(00) 00000-0000" />
    </form>
  `
})
export class NumericMaskComponent {
  form = new FormGroup({
    phoneNumber: new FormControl('')
  });
}

This example demonstrates how to apply a numeric mask to a phone number input field using the mask directive provided by the ngx-mask library.

Applying a Custom Mask

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { NgxMaskModule } from 'ngx-mask';

@Component({
  selector: 'app-custom-mask',
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="creditCard" mask="0000 0000 0000 0000" />
    </form>
  `
})
export class CustomMaskComponent {
  form = new FormGroup({
    creditCard: new FormControl('')
  });
}

This example demonstrates how to apply a custom mask to a credit card input field using the mask directive.

Using the Mask Pipe

<p>Your credit card number: {{ creditCardNumber | mask: '0000 0000 0000 0000' }}</p>

In this example, the mask pipe is used to format a credit card number for display purposes.

Getting Started

To get started with ngx-mask, follow these steps:

Install the library using npm or yarn:

npm install ngx-mask

Import the NgxMaskModule in your Angular module:

import { NgxMaskModule } from 'ngx-mask';

@NgModule({
  imports: [
    // ...
    NgxMaskModule.forRoot()
  ],
  // ...
})
export class YourModule { }

Use the mask directive in your template to apply a mask to an input field:

<input type="text" mask="(00) 00000-0000" />

Optionally, you can configure the library by passing options to the forRoot() method:

NgxMaskModule.forRoot({
  show

Competitor Comparisons

text-mask

8,264

Input mask for React, Angular, Ember, Vue, & plain JavaScript

Pros of text-mask

More flexible and can be used with various JavaScript frameworks, not limited to Angular
Supports a wider range of input types, including number inputs
Has a more extensive set of built-in mask patterns

Cons of text-mask

Less actively maintained, with fewer recent updates
May require more setup and configuration for specific use cases
Lacks some Angular-specific optimizations and integrations

Code Comparison

text-mask:

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

const numberMask = createNumberMask({
  prefix: '$',
  suffix: '.00'
})

<input mask={numberMask} />

ngx-mask:

<input type="text" mask="separator.2" prefix="$" suffix=".00" [dropSpecialCharacters]="false">

Both libraries offer similar functionality for masking input fields, but ngx-mask provides a more concise and Angular-friendly syntax. text-mask requires importing additional functions and creating mask configurations, while ngx-mask allows for inline mask definitions within the template.

text-mask offers more flexibility for use across different frameworks, but ngx-mask provides a more streamlined experience for Angular developers. The choice between the two depends on the specific project requirements and the development environment.

Inputmask

6,391

Input Mask plugin

Pros of Inputmask

More versatile, supporting various input types beyond just Angular
Extensive documentation and examples
Larger community and longer development history

Cons of Inputmask

Steeper learning curve due to more complex API
Potentially heavier in terms of file size and performance

Code Comparison

ngx-mask:

<input type="text" mask="000-000-0000" prefix="+1 ">

Inputmask:

Inputmask("999-999-9999", {
  placeholder: "___-___-____",
  clearIncomplete: true
}).mask(document.getElementById("phone"));

ngx-mask is more straightforward for Angular applications, with a simpler directive-based approach. Inputmask offers more flexibility but requires more setup.

Both libraries provide similar core functionality for input masking, but their implementation and usage differ. ngx-mask is tailored for Angular, making it easier to integrate into Angular projects. Inputmask, being framework-agnostic, offers broader applicability across different web technologies.

The choice between these libraries depends on the specific project requirements, development environment, and the level of customization needed for input masking.

cleave.js

17,957

Format input text content when you are typing...

Pros of cleave.js

Framework-agnostic, can be used with any JavaScript project
Supports both numeric and date/time formatting
Lightweight and has no dependencies

Cons of cleave.js

Less Angular-specific features compared to ngx-mask
May require more manual configuration for complex use cases
Not actively maintained (last commit over 2 years ago)

Code Comparison

cleave.js:

var cleave = new Cleave('.input-phone', {
    phone: true,
    phoneRegionCode: 'US'
});

ngx-mask:

<input mask="(000) 000-0000" prefix="+1 " [showMaskTyped]="true">

Both libraries provide input masking functionality, but ngx-mask is specifically designed for Angular applications, offering a more integrated experience with Angular's template syntax. cleave.js, on the other hand, provides a more general-purpose solution that can be used in various JavaScript environments.

While cleave.js offers flexibility across different frameworks, ngx-mask provides a more streamlined experience for Angular developers with its directive-based approach. The choice between the two depends on the specific project requirements and the development environment.

jQuery-Mask-Plugin

4,771

A jQuery Plugin to make masks on form fields and HTML elements.

Pros of jQuery-Mask-Plugin

Lightweight and easy to integrate into existing jQuery projects
Supports a wide range of browsers, including older versions
Offers a simple and intuitive API for creating custom masks

Cons of jQuery-Mask-Plugin

Requires jQuery as a dependency, which may increase overall bundle size
Limited to jQuery-based projects, not suitable for modern frameworks
Less actively maintained compared to ngx-mask

Code Comparison

jQuery-Mask-Plugin:

$('#date').mask('00/00/0000');
$('#phone').mask('(000) 000-0000');
$('#custom').mask('AA-00-SSSS');

ngx-mask:

<input mask="00/00/0000" [ngxMask]="'date'">
<input mask="(000) 000-0000" [ngxMask]="'phone'">
<input [mask]="'AA-00-SSSS'" [ngxMask]="'custom'">

Both libraries provide similar functionality for input masking, but ngx-mask is specifically designed for Angular applications, offering tighter integration with the framework. jQuery-Mask-Plugin is more versatile for general web development but may not be the best choice for modern, component-based applications.

vanilla-masker

1,291

VanillaMasker is a pure javascript mask input

Pros of vanilla-masker

Framework-agnostic, can be used with any JavaScript project
Lightweight and has minimal dependencies
Supports both browser and Node.js environments

Cons of vanilla-masker

Less actively maintained (last update was several years ago)
Fewer built-in mask patterns compared to ngx-mask
Limited documentation and examples

Code Comparison

ngx-mask:

<input type="text" mask="(000) 000-0000" prefix="+1 ">

vanilla-masker:

VMasker(document.querySelector("input")).maskPattern("(999) 999-9999");

Summary

vanilla-masker is a lightweight, framework-agnostic masking library that works in both browser and Node.js environments. It offers flexibility but has fewer built-in patterns and less active maintenance compared to ngx-mask. ngx-mask, on the other hand, is specifically designed for Angular applications and provides more extensive features and regular updates. The choice between the two depends on the project requirements, framework preferences, and the need for ongoing support and updates.

jquery.maskedinput

2,109

jQuery Masked Input Plugin

Pros of jquery.maskedinput

Lightweight and easy to integrate into existing jQuery projects
Supports a wide range of browsers, including older versions
Simple and intuitive syntax for defining masks

Cons of jquery.maskedinput

Requires jQuery as a dependency, which may not be ideal for modern projects
Less actively maintained compared to ngx-mask
Limited to input elements, while ngx-mask can be applied to various Angular components

Code Comparison

jquery.maskedinput:

$("#phone").mask("(999) 999-9999");
$("#date").mask("99/99/9999");

ngx-mask:

<input mask="(000) 000-0000" type="text">
<input mask="00/00/0000" type="text">

Summary

jquery.maskedinput is a solid choice for jQuery-based projects, offering simplicity and broad browser support. However, ngx-mask is more suitable for modern Angular applications, providing better integration with the framework and more active development. The syntax for both libraries is relatively straightforward, with ngx-mask using Angular's template-driven approach and jquery.maskedinput utilizing jQuery selectors.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

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 { IConfig } from 'ngx-mask'

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

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

Using a function to configure:

const maskConfigFunction: () => Partial<IConfig> = () => {
  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, IConfig } from 'ngx-mask'

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

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

Passing in your own mask config options

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

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

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

Or using a function to get the config:

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

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

Then, just define masks in inputs.

Usage

Text documentation

Setup hooks

$ npm run init:hooks

Contributing

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of text-mask

Cons of text-mask

Code Comparison

Pros of Inputmask

Cons of Inputmask

Code Comparison

Pros of cleave.js

Cons of cleave.js

Code Comparison

Pros of jQuery-Mask-Plugin

Cons of jQuery-Mask-Plugin

Code Comparison

Pros of vanilla-masker

Cons of vanilla-masker

Code Comparison

Summary

Pros of jquery.maskedinput

Cons of jquery.maskedinput

Code Comparison

Summary

Convert designs to code with AI

README

NGX MASK

You can try live documentation with examples

Installing

Quickstart if ngx-mask version >= 15.0.0

With default config options application level

Passing your own mask config options

Using a function to configure:

With config options feature level

With Angular modules

Quickstart if ngx-mask version < 15.0.0

With default mask config options

Passing in your own mask config options

Usage

Setup hooks

Contributing

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days