NGX MASK

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

[![CI](https://github.com/JsDaddy/ngx-mask/actions/workflows/quality-check.yml/badge.svg?branch=develop)](https://github.com/JsDaddy/ngx-mask/actions/workflows/main.yml) [![npm](https://img.shields.io/npm/v/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask) [![npm downloads](https://img.shields.io/npm/dt/ngx-mask.svg)](https://npmjs.org/ngx-mask) [![npm](https://img.shields.io/npm/dm/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask) [![GitHub contributors](https://img.shields.io/github/contributors/JSDaddy/ngx-mask.svg?style=flat)](https://github.com/JSDaddy/ngx-mask) [![GitHub stars](https://img.shields.io/github/stars/JSDaddy/ngx-mask.svg?label=GitHub%20Stars&style=flat)](https://github.com/JSDaddy/ngx-mask) You can also try our NGX LOADER INDICATOR [check](https://www.npmjs.com/package/ngx-loader-indicator). You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste). ### You can try live [demo](https://jsdaddy.github.io/ngx-mask/) with examples ## Installing ```bash $ npm install --save ngx-mask ``` ## 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 ```typescript bootstrapApplication(AppComponent, { providers: [ (...) provideEnvironmentNgxMask(), (...) ], }).catch((err) => console.error(err)); ``` ### Passing your own mask config options ```typescript import { IConfig } from 'ngx-mask' const maskConfig: Partial = { validation: false, }; bootstrapApplication(AppComponent, { providers: [ (...) provideEnvironmentNgxMask(maskConfig), (...) ], }).catch((err) => console.error(err)); ``` ### Using a function to configure: ```typescript const maskConfigFunction: () => Partial = () => { return { validation: false, }; }; bootstrapApplication(AppComponent, { providers: [ (...) provideEnvironmentNgxMask(maskConfigFunction), (...) ], }).catch((err) => console.error(err)); ``` ### With config options feature level ```typescript @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 ```typescript @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 ```typescript import { NgxMaskModule, IConfig } from 'ngx-mask' export const options: Partial | (() => Partial) = null; @NgModule({ imports: [ NgxMaskModule.forRoot(), ], }) ``` ### Passing in your own mask config options ```typescript import { NgxMaskModule, IConfig } from 'ngx-mask' const maskConfig: Partial = { validation: false, }; @NgModule({ imports: [ NgxMaskModule.forRoot(maskConfig), ], }) ``` Or using a function to get the config: ```typescript const maskConfigFunction: () => Partial = () => { return { validation: false, }; }; @NgModule({ imports: [ NgxMaskModule.forRoot(maskConfigFunction), ], }) ``` Then, just define masks in inputs. ## Usage ```html ``` or ```html ``` Also, you can use mask pipe. ```html {{phone | mask: '(000) 000-0000'}} ``` You could path any valid config options, for example thousandSeparator and suffix ```html {{value | mask: 'separator': {thousandSeparator: ',', suffix: ' sm'}} ``` ### Examples | mask | example | | -------------- | -------------- | | 9999-99-99 | 2017-04-15 | | 0\*.00 | 2017.22 | | 000.000.000-99 | 048.457.987-98 | | AAAA | 0F6g | | SSSS | asDF | | UUUU | ASDF | | LLLL | asdf | ## Mask Options You can define your custom options for all directives (as object in the mask module) or for each (as attributes for directive). If you override this parameter, you have to provide all the special characters (default one are not included). ### specialCharacters (string[ ]) We have next default characters: | character | | --------- | | - | | / | | ( | | ) | | . | | : | | **space** | | + | | , | | @ | | [ | | ] | | " | | ' | #### Usage ```html ``` ##### Then ```text Input value: 789-874.98 Masked value: [78]\[987] ``` ```typescript patterns ({ [character: string]: { pattern: RegExp, optional?: boolean}) ``` We have next default patterns: | code | meaning | | ----- | ------------------------------------------- | | **0** | digits (like 0 to 9 numbers) | | **9** | digits (like 0 to 9 numbers), but optional | | **A** | letters (uppercase or lowercase) and digits | | **S** | only letters (uppercase or lowercase) | | **U** | only letters uppercase | | **L** | only letters lowercase | ##### Usage ```html ``` and in your component ```typescript public customPatterns = { '0': { pattern: new RegExp('\[a-zA-Z\]')} }; ``` ##### Then ```text Input value: 789HelloWorld Masked value: (Hel-loW) ``` ### Custom pattern for this You can define custom pattern and specify symbol to be rendered in input field. ```typescript pattern = { B: { pattern: new RegExp('\\d'), symbol: 'X', }, }; ``` ### prefix (string) You can add prefix to you masked value #### Usage ```html ``` ### suffix (string) You can add suffix to you masked value #### Usage ```html ``` ### dropSpecialCharacters (boolean | string[]) You can choose if mask will drop special character in the model, or not, default value is `true`. #### Usage ```html ``` ##### Then ```text Input value: 789-874.98 Model value: 789-874.98 ``` ### showMaskTyped (boolean) You can choose if mask is shown while typing, or not, default value is `false`. #### Usage ```html ``` ### allowNegativeNumbers (boolean) You can choose if mask will allow the use of negative numbers. The default value is `false`. #### Usage ```html ``` ##### Then ```text Input value: -10,000.45 Model value: -10000.45 ``` ### placeHolderCharacter (string) If the `showMaskTyped` parameter is enabled, this setting customizes the character used as placeholder. Default value is `_`. #### Usage ```html ``` ### clearIfNotMatch (boolean) You can choose clear the input if the input value **not match** the mask, default value is `false`. ### Pipe with mask expression and custom Pattern ([string, pattern]) You can pass array of expression and custom Pattern to pipe. #### Usage ```html {{phone | mask: customMask}} ``` and in your component ```typescript customMask: [string, pattern]; pattern = { P: { pattern: new RegExp('\\d'), }, }; this.customMask = ['PPP-PPP', this.pattern]; ``` ### Repeat mask You can pass into mask pattern with brackets. #### Usage ```html ``` ### Thousand separator You can divide your input by thousands, by default will seperate with a space. #### Usage ```html ``` For separate input with dots. ```html ``` For using decimals enter `.` and how many decimals to the end of your input to `separator` mask. ```html ``` ```text Input value: 1234.56 Masked value: 1 234.56 Input value: 1234,56 Masked value: 1.234,56 Input value: 1234.56 Masked value: 1,234.56 ``` ```html ``` For limiting decimal precision add `.` and the precision you want to limit too on the input. **2** is useful for currency. **0** will prevent decimals completely. ```text Input value: 1234,56 Masked value: 1.234,56 Input value: 1234.56 Masked value: 1,234.56 Input value: 1234,56 Masked value: 1.234 Input value: 1234.56 Masked value: 1,234 ``` ```html ``` For limiting the number of digits before the decimal point you can set `separatorLimit` value to _10_, _100_, _1000_ etc. ```text Input value: 12345678,56 Masked value: 1.234,56 ``` ### Time validation You can validate your input as 24 hour format. #### Usage ```html ``` ### Date validation You can validate your date. #### Usage ```html ``` ### leadZeroDateTime (boolean) If the `leadZeroDateTime` parameter is `true`, skipped symbols of date or time will be replaced by `0`. Default value is `false`. #### Usage ```html ``` ```text Input value: 422020 Masked value: 04/02/2020 ``` ```html ``` ```text Input value: 777 Masked value: 07:07:07 ``` ### Percent validation You can validate your input for percents. #### Usage ```html ``` ### FormControl validation You can validate your `formControl`, default value is `true`. #### Usage ```html ``` ### Secure input You can hide symbols in input field and get the actual value in `formcontrol`. #### Usage ```html ``` ### IP valid mask #### Usage ```html ``` ### CPF_CNPJ valid mask #### Usage ```html ``` ### Dynamic valid mask #### Usage You can pass into mask pattern with `||`. ```html ``` ```html ``` ### Function maskFilled #### Usage ```html ```

	Stars	Issues	Version	Updated	Created
angular-easy-masks	10	1	0.2.5	5 years ago	5 years ago
angular2-text-mask	8,204	330	9.0.0	5 years ago	7 years ago
ngx-mask	1,018	172	15.1.0	16 days ago	6 years ago
primeng	8,045	541	15.2.1	5 days ago	7 years ago
soft-angular-mask	6	2	0.2.3	5 years ago	6 years ago

angular-easy-masks vs angular2-text-mask vs ngx-mask vs primeng vs soft-angular-mask

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past