Package detail

ngx-mask

JsDaddy1.5mMIT19.0.6

awesome ngx mask

ng2-mask, ngx-mask, ng2, angular-mask, mask, angular, angular2, angular2-mask, ng2mask, jsdaddy

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.

Actively supported versions

ngx-mask follows the official Angular support policy, supporting the Active and LTS (Long-Term Support) versions of Angular. As of the latest release, Angular v17 and newer are supported.

Projects using Angular versions outside the supported range (e.g., older than v17) should use the last compatible version of ngx-mask. However, these versions will no longer receive updates, bug fixes, or new features.

For detailed information about Angular's versioning and support schedule, visit the official Angular releases page.

Usage

Text documentation

Contributing

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

changelog

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