README
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:
- Build ngx-mask
npm run lib:build
- (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.