https://github.com/rafaelcorradini/ngx-ion-simple-mask
Input mask for Angular/Ionic
https://github.com/rafaelcorradini/ngx-ion-simple-mask
angular angular7 ionic ionic-angular ionic4 mask ngx simple
Last synced: about 1 month ago
JSON representation
Input mask for Angular/Ionic
- Host: GitHub
- URL: https://github.com/rafaelcorradini/ngx-ion-simple-mask
- Owner: rafaelcorradini
- License: mit
- Created: 2019-04-17T22:55:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-11-08T00:35:23.000Z (over 3 years ago)
- Last Synced: 2025-04-14T20:19:48.790Z (about 1 month ago)
- Topics: angular, angular7, ionic, ionic-angular, ionic4, mask, ngx, simple
- Language: TypeScript
- Size: 225 KB
- Stars: 22
- Watchers: 2
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://raw.githubusercontent.com/rafaelcorradini/ngx-ion-simple-mask/master/LICENSE)
[](https://travis-ci.com/rafaelcorradini/ngx-ion-simple-mask)
# ngx-ion-simple-Mask
Input mask for Angular/Ionic (Tested with Ionic 4)
```bash
$ npm install --save ngx-ion-simple-mask
```
Import ngx-ion-simple-mask module in Angular app.
```typescript
import { SimpleMaskModule } from 'ngx-ion-simple-mask'
@NgModule({
imports: [
SimpleMaskModule
]
})
```
Or import the directive/pipe separately
```typescript
import { SimpleMaskDirective, SimpleMaskPipe } from 'ngx-ion-simple-mask'
@NgModule({
declarations: [
SimpleMaskDirective,
SimpleMaskPipe
]
})
```
### Ionic
ionic usage example:
```html
```
### Angular
Angular usage example:
```html
```
### Form Control/NgModel
The libray works with Form Control and ngModel:
```html
```
```html
```
### Pipe
#### example
```html
{{ '123321123-12' | simpleMask:'999.999.999-99' }}
```
output:
```html
123.321.123-12
```
#### example with add patterns
```html
{{ 'asd-123' | simpleMask:'aaa-II':{'I': '[0-9]' } }}
```
output:
```html
asd-12
```
#### example with new patterns(ignoring old patterns)
```html
{{ '123-bddd' | simpleMask:'III-aaa':{'I': '[0-9]' }:true }}
```
output:
```html
123-aaa
```
## Patterns
### Default patterns:
```typescript
patterns = {
'9': new RegExp('[0-9]'),
'a': new RegExp('[a-z]'),
'A': new RegExp('[A-Z]'),
'x': new RegExp('[a-zA-Z]'),
'*': new RegExp('[a-zA-Z0-9]'),
'~': new RegExp('[-\+]')
};
```
| pattern | meaning |
|------|---------|
| **9** | digits (0-9) |
| **a** | lowercase letters (a-z) |
| **A** | uppercase letters (A-Z) |
| **x** | letters uppercase or lowercase (a-z, A-Z) |
| **~** | - or + |
| **\*** | letters or digits (a-z, A-Z, 0-9) |
| **\\** | cancel next pattern effect |
#### Examples
| mask | example |
| ------- | ------- |
| 999.999.aaa | 113.123.asd |
| (AA) 999 | (AS) 123 |
| 999\\\~ | 999~ |
### Set new patterns
The set strings will be used as regex
```html
```
example of input: abc123
### Add patterns
The set strings will be used as regex
```html
```
example of input: +abc123
## angular-library-starter
The project was built with [angular-library-starter](https://github.com/robisim74/angular-library-starter/).
## License
MIT