Détail du package

ngx-mask

JsDaddy1.5mMIT20.0.2

awesome ngx mask

ng2-mask, ngx-mask, ng2, angular-mask

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 our live 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';

const maskConfig: 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()],
})
export class MyFeatureComponent {}

For Angular < 15 (NgModule)

Application-wide Setup with Default Config

import { NgxMaskModule } from 'ngx-mask';

@NgModule({ imports: [NgxMaskModule.forRoot()] })
export class AppModule {}

With Custom Configuration

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

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

@NgModule({ imports: [NgxMaskModule.forRoot(maskConfig)] })
export class AppModule {}

Feature-level Configuration

import { NgxMaskModule } from 'ngx-mask';

@NgModule({ imports: [NgxMaskModule.forChild()] })
export class FeatureModule {}

Related Projects

Check out other projects by JSDaddy:

Contributing

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

20.0.3(2025-08-01)

fix

Fix (#1560)

20.0.2(2025-07-31)

fix

Fix (#1559)

20.0.1(2025-07-31)

fix

Fix (#1548)
Fix (#1551)

20.0.0(2025-07-22)

Feature

update ng 20.x

19.0.7(2024-12-20)

Contributing

PR (#1520)
PR (#1522)
PR (#1509)
Fix (#1508)
Fix (#1487)
Fix (#1525)

19.0.6(2024-12-20)

Fix

Fix (#1481)

19.0.5(2024-12-20)

Fix

Fix (#1411)

19.0.4(2024-12-13)

Feature

add input property instantPrefix

Fix

Fix (#1477)
Fix (#1476)

19.0.3(2024-12-05)

Contributing Fix

Fix (#1455)

Fix

Fix (#1472)
Fix (#1415)

19.0.2(2024-12-03)

Fix

Fix (#1456)
Fix (#1458)
Fix (#1446)
Fix (#1457)

19.0.1(2024-11-29)

Feature

change @Input to input in NgxMaskDirective
change @Output output in NgxMaskDirective
change variables to signals in NgxMaskDirective

19.0.0(2024-11-22)

Feature

update ng 19.x

18.0.4(2024-11-11)

Fix

Fix (#1449)

18.0.3(2024-11-05)

Fix

Fix (#1372)
Fix (#1441)
Fix (#1442)
Fix (#1440)
Fix (#1409)

18.0.2(2024-11-01)

Fix

Fix (#1427)
Fix (#1405)
Fix (#1426)
Fix (#1406)
Fix (#1420)
Fix (#1416)

18.0.1(2024-10-29)

Breaking Changes

rename "IConfig" to "NgxMaskConfig"
rename "optionsConfig" to "NgxMaskOptions"
change interface to type

Fix

Fix (#1410)

17.1.8(2024-07-16)

Fix

Fix (#1344)
Fix (#1356)

17.1.8(2024-07-16)

Fix

Fix (#1344)
Fix (#1356)

17.1.7(2024-07-18)

Fix

Fix (#1399)
Fix (#1360)
Fix (#1357)
Fix (#1364)

17.1.6(2024-07-16)

Fix

Fix (#1342)

17.1.5(2024-07-16)

Fix

Fix (#1389)

17.1.4(2024-07-16)

Fix

Fix (#1389)

17.1.3(2024-07-16)

Fix

Fix (#1386)
Fix (#1370)

17.1.2(2024-07-15)

Fix

Fix (#1378)
Fix (#1390)

17.1.1(2024-07-05)

Fix

Fix (#1383)

17.1.0(2024-07-05)

Fix

Fix (#1294)
Fix (#1344)
Fix (#1365)

17.0.9(2024-07-02)

Fix

Fix (#1349)
Fix (#1354)
Fix (#1369)
Fix (#1378)
Fix (#1377)

17.0.8(2024-04-30)

Fix

Fix (#1358)

17.0.7(2024-03-28)

Fix

Fix (#1298)
Fix (#1307)
Fix (#1306)

17.0.6(2024-03-27)

Fix

Fix (#1301)
Fix (#1302)
Fix (#1292)

17.0.5(2024-03-25)

Fix

Fix (#1295)
Fix (#1292)
Fix (#1314)
Fix (#1310)
Fix (#1304)
Fix (#1308)
Fix (#1299)

17.0.4(2023-12-01)

Feat

update v16.4.2
update v15.2.3
update v14.3.3
update v13.2.2

17.0.3(2023-11-30)

Feat

update dependencies

17.0.2(2023-11-29)

Feat

update dependencies

17.0.2(2023-11-29)

Fix

Fix (#1272)
Fix (#1270)
Fix (#1259)
Fix (#1240)
Fix (#1274)

17.0.1(2023-11-28)

Fix

Fix (#1271)
Fix (#1278)
Fix (#1277)
Fix (#1269)
Fix (#1276)
Fix (#1279)

17.0.0(2023-11-08)

Feature

update ng 17.x -

Feature 16.4.2

Upgrade version 16.4.2 with more fixes since version 17.x.x

16.4.1(2023-11-08)

Fix

Fix (#1251)

16.4.0(2023-11-07)

Fix

Fix (#1261)
Fix (#1258)
Fix (#1262)
Fix (#1254)
Fix (#1256)

16.3.9(2023-10-02)

Fix

Fix (#1248)
Fix (#1246)
Fix (#1247)

16.3.8(2023-09-18)

Fix

Change README.md
Fix (#1242)

16.3.7(2023-09-18)

Fix

Fix (#1238)

16.3.6(2023-09-15)

Fix

Fix (#1232)

16.3.5(2023-09-14)

Fix

Fix (#1225)

16.3.4(2023-09-13)

Feat

update version

16.3.3(2023-09-13)

Fix

Fix (#1222)

16.3.2(2023-09-13)

Fix

Fix (#658)

16.3.1(2023-09-01)

Fix

Fix (#877)
Fix (#613)
Fix (#644)
Fix (#788)

16.3.0(2023-08-28)

Fix

Fix (#1212)
Fix (#1215)
Fix (#1210)
Fix (#1213)
Fix (#1217)
Fix (#1206)
Fix (#1211)

16.2.9(2023-08-08)

Fix

Fix (#1076)
Fix (#890)
Fix (#841)
Fix (#1162)

16.2.7(2023-08-08)

Fix

Fix (#843)
Fix (#1200)

16.2.6(2023-08-03)

Fix

Fix (#613)
Fix (#671)
Fix (#774)
Fix (#1202)
Fix (#1203)

16.2.5(2023-07-24)

Fix

Fix (#838)
Fix (#1193)
Fix (#1199)

16.2.4(2023-07-12)

Fix

Fix (#1182)
Fix (#1191)
Fix (#941)

16.2.3(2023-07-05)

Fix

Fix (#842)
Fix (#623)
Fix (#836)
Fix (#752)

16.2.2(2023-07-03)

Fix

Fix (#1186)

16.2.1(2023-06-30)

Fix

Fix (#906)
Fix (#958)
Fix (#977)

16.2.0(2023-06-27)

Fix

Fix (#724)
Fix (#731)

16.1.9(2023-06-21)

Fix

Fix (#812)
Fix (#636)

16.1.8(2023-06-19)

Fix

Fix (#1166)
Fix (#865)

16.1.7(2023-06-14)

Fix

Fix (#1171)

16.1.6(2023-06-14)

Fix

Fix (#797)

16.1.5(2023-06-13)

Fix

Fix (#1167)
Fix (#1169)
Fix (#934)

16.1.4(2023-06-13)

Fix

Fix (#929)
Fix (#944)

16.1.3(2023-06-08)

Fix

Fix (#601)
Fix (#1042)
Fix (#680)

16.1.2(2023-06-05)

Fix

Fix (#772)

16.1.1(2023-06-05)

Fix

Fix (#1071)

16.1.0(2023-06-01)

Fix

Fix (#889)
Fix (#881)
Fix (#1024)

16.0.9(2023-05-24)

Fix

Fix (#933)
Fix (#773)
Fix (#905)
Fix (#932)
Fix (#853)
Fix (#908)
Fix (#866)
Fix (#722)

16.0.8(2023-05-29)

Fix

Fix (#1018)

16.0.7(2023-05-26)

Fix

Fix (#916)

16.0.6(2023-05-25)

Fix

Fix (#880)

16.0.5(2023-05-24)

Fix

Fix (#697)
Fix (#850)
Fix (#786)

16.0.4(2023-05-19)

Fix

Fix (#911)
Fix (#854)

16.0.3(2023-05-18)

Fix

Fix (#1135)
Fix (#1066)
Fix (#870)
Fix (#1019)

16.0.2(2023-05-16)

Fix

Fix (#1146)

16.0.1(2023-05-16)

Fix

Fix (#871)
Fix (#920)
Fix (#785)
Fix (#718)
Fix (725)
Fix (#903)
Fix (#860)

16.0.0(2023-05-13)

Feature

update ng 16.x

Feature 15.2.3

Upgrade version 15.2.3 with more fixes since version 17.x.x

Feature 15.2.1

Upgrade version 15.2.1 with more fixes since version 16.x.x

15.1.5(2023-05-12)

Fix

Fix (#837)

15.1.4(2023-05-09)

Fix

Fix (#1078)
Fix (#816)
Fix (#925)
Fix (#811)

15.1.3(2023-05-02)

Fix

Fix (#1103)

15.1.2(2023-03-27)

Fix

Fix (#1101)
Fix (#1009)

15.1.1(2023-04-23)

Fix

Close non public API

15.1.0(2023-03-10)

Fix

Fix (#1077)

15.0.3(2023-02-20)

Fix

Fix (#1069)

15.0.2(2022-12-26)

Fix

Fix README.md

15.0.1(2022-26-12)

Fix

separate provideEnvironmentNgxMask and provideNgxMask

15.0.0(2022-19-12)

Fix

update ng 15.x
usage new standalone API

Feature 14.3.3

Upgrade version 15.2.2 with more fixes since version 17.x.x

Feature 14.3.2

Upgrade version 14.3.2 with more fixes since version 16.x.x
Change MaskPipe => NgxMaskPipe
Change MaskService => NgxMaskService
Change MaskApplierService => NgxMaskApplierService
Change MaskDirective => NgxMaskMaskDirective

14.2.4(2022-10-27)

Fix

Fix (#1039)
new code and styles linting rules formatting

14.2.3(2022-09-16)

Fix

Fix (#1030)

14.2.2(2022-09-13)

Fix

Fix (#960)
Fix (#946)
Fix (#1027)

14.2.1(2022-09-11)

Fix

package build process

14.2.0(2022-09-11)

Fix

update ng 14.2.1
Fix (#1029)

14.0.3(2022-06-21)

Fix

Fix (#1017)
Fix (#1008)

14.0.2(2022-06-09)

Fix (#688)

14.0.1(2022-06-06)

14.0.0(2022-06-05)

Feature

Update to Angular 14

Feature 13.3.2

Upgrade version 13.2.2 with more fixes since version 17.x.x

Feature 13.2.1

Upgrade version 13.2.1 with more fixes since version 16.x.x
Change MaskPipe => NgxMaskPipe
Change MaskService => NgxMaskService
Change MaskApplierService => NgxMaskApplierService
Change MaskDirective => NgxMaskMaskDirective

13.1.15(2022-05-29)

Fix

Fix (#648)

13.1.14(2022-05-17)

Fix

Fix (#984)

13.1.13(2022-05-09)

Fix

Fix (#915)

13.1.12(2022-04-27)

Fix

Fixed issue where active elements within a shadowRoot would not be found by mask
Fix (#909)

13.1.11 (2022-04-25)

Fix

Fix (#1000)

13.1.10 (2022-04-18)

Fix

Fix (#948)

13.1.9 (2022-04-13)

Fix

Fix (#923)

13.1.8 (2022-04-08)

Feature

Added lowercase and uppercase mask support
Feature (#947)

13.1.6 (2022-04-04)

Fix

Ghost characters shown in input when toggling mask on/off
Fix (#897)

13.1.5 (2022-04-03)

Fix

Fixed (#848)

13.1.4 (2022-03-30)

Feature

Function maskFilled is added
Feature (#917)

13.1.3 (2022-03-28)

Features and fixes

feature (#940) Fixed (#965)

13.1.2 (2022-01-20)

Features

added triggerOnMaskChange, allow mask change to trigger onChange

13.1.1 (2022-01-12)

Fixes

Revision for separator logic.
Set default decimalMarker to [".",","] instead "."

13.1.0 (2021-12-30)

Features

Enable non-zero-selections
Deletion of special mask character moves just the cursor instead of deleting the character next to it

Test/CI fixes

Enable cypress component testing

13.0.1 (2021-12-15)

Test/CI fixes

the same that in 13.0.0
fix test
fix CI

13.0.0 (2021-11-28)

Angular 13 release

up all dependencies to latest
move from tslint to eslint
add more strict rules for tsconfig and code quality config
build library with IVY and new angular package structure

12.0.0 (2021-05-19)

Bug Fixes

Fixed (#875) Fixed (#892) Fixed (#861) Fixed (#893)

11.1.5 (2020-03-19)

Bug Fixes

Fixed (#864) (#863) (#706)

11.1.4 (2020-11-26)

Bug Fixes

Remove complet mask if part of it is deleted (#831)

11.1.3 (2020-11-25)

Bug Fixes

Now backspace no leaves special characters (#692) (831)

11.1.2 (2020-11-24)

Bug Fixes

DropSpecialCharacters false also should return prefix (#686) (830)

11.1.1 (2020-11-24)

Bug Fixes

Number cast bug. Now if model value number mask should return type number (#791) (#702) (829)

11.1.0 (2020-11-23)

Bug Fixes

Copy paste event should work as expected (#765) (827)

11.0.1 (2020-11-15)

Bug Fixes

Difinition for form control with `{value, disable} should work (#803) (826)

11.0.0 Update to Angular 11

Update to Angular 11

9.1.0 Directive's selector change

Change directive selector to restrict to input and textarea tags

9.0.2 Bugfix

Fix for #721 - prevent entering dots when decimal marker is comma

9.0.1 Bugfix

Fix for #715 - mark fields as touched on blur on form fields with an empty mask Fix for #711 - stop fields being marked as dirty after a form reset

9.0.0 Update to Angular 9

Feature: Library updated to Angular 9 Feature: Can pass empty string for thousandSeparator if do not want any separation Fix: allowNegativeNumbers works correctly when set as true or false. If false, entering a hyphen will not be allowed Fix: stop cursor jumping around when mask is set as empty

8.2.0 bugfix and breaking change

Fix for #657 - showMaskTyped option now works correctly when set in the config Fix for #665 - validateTime mark field as invalid immediately if value is null Feature: Added new error page for handling 404's, and new bugs page for being a playground for bug fixing Breaking change: Made validation error return an object named mask. If you were previously checking for a validation error named 'Mask error' then it will need changing to just 'mask'.

8.1.7 bugfix

Fix for #369 - add thousandSeparator to separator pipe Fix for #381 - add support to negative number in separator mask

8.1.6 bugfix

Fix for #560 - do not overwrite the mask available patterns when patterns attribute passed in value is a falsey value i.e null/undefined/false Fix for #620 - allow delete button to work when at beginning of input and no prefix exists Fix for #621 - validation config value now works correctly

8.1.5 bugfix

Fix for #614 - export everything from config

8.1.4 bugfix

Fix for #580 - honour the special characters that user may have specified, and prevent runtime exception occuring Project folder structure converted over to follow Angular CLI way of libraries