InputMaskAngular is an Angular library that uses ts-input-mask allowing to format user input on the fly.
Based on RadMadRobot's Input Mask Library
- International phone numbers:
+1 ([000]) [000] [00] [00] - Local phone numbers:
([000]) [000]-[00]-[00] - Names:
[A][-----------------------------------------------------] - Text:
[A…] - Dates:
[00]{.}[00]{.}[9900] - Serial numbers:
[AA]-[00000099] - IPv4:
[099]{.}[099]{.}[099]{.}[099] - Visa card numbers:
[0000] [0000] [0000] [0000] - MM/YY:
[00]{/}[00]
npm install input-mask-angular --save
import { InputMaskAngularModule } from 'input-mask-angular';
<input type="text" [mask]="'{+7} ([000]) [000] [00] [00]'">
<input type="text"
[mask]="'{+7} ([000]) [000] [00] [00]'"
(formattedText)="logValue($event)" \\ text formatted by the mask: +7 (000) 000 00 00
(extractedValue)="logValue($event)" \\ text extracted from the mask: +70000000000
(maskFilled)="logValue($event)" \\ emits true when mask has been filled with correct value, else emits false
[options]="options" options of type InputMaskOptions
>
<input type="text"
[mask]="'{+7} ([000]) [000] [00] [00]'"
(formattedText)="logValue($event)" \\ text formatted by the mask: +7 (000) 000 00 00
(extractedValue)="logValue($event)" \\ text extracted from the mask: +70000000000
(maskFilled)="logValue($event)" \\ emits true when mask has been filled with correct value, else emits false
[options]="options" options of type InputMaskOptions
[value]="'0000000000'"
>
Pipe allows you to format any string with the mask you provide
It is used like this: mask:'(format of mask)'
{{ value | mask:'{+7} ([000]) [000] [00] [00]' }}
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
This project is licensed under the MIT License
- RadMadRobot's Android Input Mask Library
- RadMadRobot's iOS Input Mask Library
- ts-input-mask TypeScript library used by the directive