JsDaddy/ngx-maskPublic

NotificationsYou must be signed in to change notification settings
Fork301
Star1.2k

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

License

MIT license

1.2k stars 301 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,111 Commits
.github		.github
cypress		cypress
projects/ngx-mask-lib		projects/ngx-mask-lib
src		src
.gitignore		.gitignore
.gitmodules		.gitmodules
.lintstagedrc		.lintstagedrc
.markdownlint.json		.markdownlint.json
.prettierrc.json		.prettierrc.json
.puppeteerrc.cjs		.puppeteerrc.cjs
.releaserc.yaml		.releaserc.yaml
.stylelintignore		.stylelintignore
.stylelintrc.json		.stylelintrc.json
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
USAGE.md		USAGE.md
angular.json		angular.json
bun.lock		bun.lock
commitlint.config.js		commitlint.config.js
cypress.config.ts		cypress.config.ts
eslint.config.js		eslint.config.js
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.eslint.json		tsconfig.eslint.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Repository files navigation

NGX-MASK

A powerful Angular directive for input masking with customizable patterns

Created with ❤️ by

Features

NGX-MASK is a feature-rich input mask directive for Angular applications that provides:

🎯 Masking Patterns

• Custom patterns & expressions

• Multiple mask patterns (|)

• Built-in common patterns

• Prefix & suffix support

🔢 Number Formatting

• Thousand separators

• Decimal markers

• Negative numbers

• Leading zeros

⚡ Input Control

• Real-time validation

• Clear on non-match

• Show/hide mask typing

• Keep character positions

📅 Date & Time

• Leading zero handling

• AM/PM support

• Custom separators

• Multiple formats

🛠️ Customization

• Custom placeholders

• Special characters

• Transform functions

• Custom validation

📋 Form Integration

• Reactive Forms

• ControlValueAccessor

• Built-in validation

• Standalone support

Demo

Check out ourlive documentation and examples

Installation

# For Angular 17 and above$ npm install ngx-mask# Using npm$ bun add ngx-mask# Using bun# For specific Angular versions:# Angular 16.x.x$ npm install ngx-mask@16.4.2# Using npm$ bun add ngx-mask@16.4.2# Using bun# Angular 15.x.x$ npm install ngx-mask@15.2.3# Using npm$ bun add ngx-mask@15.2.3# Using bun# Angular 14.x.x$ npm install ngx-mask@14.3.3# Using npm$ bun add ngx-mask@14.3.3# Using bun# Angular 13.x.x or 12.x.x$ npm install ngx-mask@13.2.2# Using npm$ bun add ngx-mask@13.2.2# Using bun

Package Manager Note: You can use either npm or bun based on your preference. Both package managers will work equally well with ngx-mask.

Version Compatibility

NGX-MASK follows Angular's official support policy, supporting Active and LTS versions. Currently supported:

Angular 17 and newer (latest features and updates)
For older Angular versions, use the corresponding NGX-MASK version as specified above

Note: Versions for Angular older than v17 will not receive new features or updates.

Quick Start

For Angular 15+ (Standalone)

Application-wide Setup with Default Config

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

With Custom Configuration

import{NgxMaskConfig}from'ngx-mask';constmaskConfig:Partial<NgxMaskConfig>={validation:false};bootstrapApplication(AppComponent,{providers:[provideEnvironmentNgxMask(maskConfig)]}).catch((err)=>console.error(err));

Feature-level Configuration

@Component({selector:'my-feature',standalone:true,imports:[NgxMaskDirective],providers:[provideNgxMask()],})exportclassMyFeatureComponent{}

For Angular < 15 (NgModule)

Application-wide Setup with Default Config

import{NgxMaskModule}from'ngx-mask';@NgModule({imports:[NgxMaskModule.forRoot()]})exportclassAppModule{}

With Custom Configuration

import{NgxMaskModule,NgxMaskConfig}from'ngx-mask';constmaskConfig:Partial<NgxMaskConfig>={validation:false};@NgModule({imports:[NgxMaskModule.forRoot(maskConfig)]})exportclassAppModule{}

Feature-level Configuration

import{NgxMaskModule}from'ngx-mask';@NgModule({imports:[NgxMaskModule.forChild()]})exportclassFeatureModule{}

Related Projects

Check out other projects by JSDaddy:

Contributing

We welcome contributions! Please read ourcontributing guidelines to learn about our development process and how you can propose bugfixes and improvements.