Ngx-mask

An input mask directives library built on top of Angular.

Installation

npm config set @utp:registry https://npm.stdev.ru/
npm install @utp/ngx-mask

Setup

import { NgxMaskModule } from 'ngx-mask';

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

Usage

<!-- directive -->
<input phoneMask [maskOptions]="{mask: '+{7}(000)000-00-00'}"
  <!--see more mask optional props in a guide-->
/>

Directives

• phoneMask
• alphaNumericMask
• datePickerMask
• floatMask
• grnzMask
• intMask
• kppMask
• subCodeMask
• cadastralMask
• numberMask
• cyrillicMask

:page_with_curl: Avalaible masks

phoneMask

By using this mask we can mask our phone numbers

Usage

<input phoneMask [unMask]="true"/>

alphaNumericMask

By using this mask we can limit our inputs to only alphabets and numbers

Usage

<input alphaNumericMask [withCyrillic]="true"/>

Options

| Option | Default | Description | | ----------- | ----------- | ------------ | | onlyLowerCase | false | Allow only lowercase letters | | onlyUpperCase | false | Allow only uppercase letters | | withCyrillic | false | Allow cyrillic letters also | | withWhiteSpace | false | Allow withWhiteSpace |

datePickerMask

By using this mask we can mask our date

Usage

<input datePickerMask nzFormat="dd.MM.yyyy hh:mm:ss" formControlName="date" [nzShowTime]="true"/>

floatMask

By using this mask we can mask a number to use , instead of .

Usage

<input floatMask [fractionLength]="2" [withMinus]="true"/>

Options

| Option | Default | Description | | ----------- | ----------- | ------------ | | fractionLength | 2 | Fraction length | | withMinus | false | Allow negetive number |

grnzmask

By using this mask we can mask out input in GRNZ format

Usage

<input grnzMask [isTrailer]="true"/>

Options

| Option | Default | Description | | ----------- | ----------- | ------------ | | isTrailer | false | Is trailer or not |

intMask

By using this mask we can allow only integer numbers in the input

Usage

<input intMask [withMinus]="true"/>

Options

| Option | Default | Description | | ----------- | ----------- | ------------ | | withMinus | false | Allow negetive number |

kppMask

By using this mask we can put only valid kpp number

Usage

<input kppMask [kppMasMode]="2"/>

Options

| Option | Default | Description | | ----------- | ----------- | ------------ | | kppMasMode | 2 | Resident -> 0, NotResident -> 1, All -> 2 |

subCodeMask

By using this mask we can put only subcode number 000-000 number

Usage

<input subCodeMask/>

cadastralMask

By using this mask we can make our cadastral mask 00:00:0000000:00

Usage

<input cadastralMask [unMask]="true"/>

numberMask

By using this mask we can make our input to have only numbers

Usage

<input numberMask [withMinus]="true" [decimal]="false" type="text">

Options

| Option | Default | Description | | ----------- | ----------- | ------------ | | decimal | true | allow decimal numbers | | withMinus | false | allow negetive numbers |

cyrillicMask

By using this mask we can allow only allow cyrillic letters

Usage

<input cyrillicMask type="text">

Optional props

| Directive | Default | Description | Usage | | ----------- | ----------- | ------------ | ----- | | maskOptions | Depends on directive type | Pass / override mask option object | [maskOptions]="{mask: '+{7}(000)000-00-00'}" | | unMask | false| Get unmasked value on form submit (It doesn't work with datePickerMask)| [unMask] = "true" |

Development

As to make changes to this package follow the steps:

1. Build ngx-mask

  npm run lib:build

2. (Optional) Launch example app

  ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.