Package Exports

@initru/ngx-ion-simple-mask
@initru/ngx-ion-simple-mask/bundles/ngx-ion-simple-mask.umd.js
@initru/ngx-ion-simple-mask/fesm5/ngx-ion-simple-mask.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@initru/ngx-ion-simple-mask) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-ion-simple-Mask

Input mask for Angular/Ionic (Tested with Ionic 4)

Installing

$ npm install --save ngx-ion-simple-mask

Usage

Import ngx-ion-simple-mask module in Angular app.

import { SimpleMaskModule } from 'ngx-ion-simple-mask'

@NgModule({
  imports: [
    SimpleMaskModule
  ]
})

Or import the directive/pipe separately

import { SimpleMaskDirective, SimpleMaskPipe } from 'ngx-ion-simple-mask'

@NgModule({
  declarations: [
    SimpleMaskDirective,
    SimpleMaskPipe
  ]
})

Ionic

ionic usage example:

<ion-input simpleMask="999.999.999-99" [clearIfNotMatch]="true"></ion-input>

Angular

Angular usage example:

<input simpleMask="999.999.999-99" [clearIfNotMatch]="true">

Form Control/NgModel

The libray works with Form Control and ngModel:

<input simpleMask="999.999.999-99" [formControl]="formControl">

<input simpleMask="999.999.999-99" [(ngModel)]="value">

Pipe

example

<p>{{ '123321123-12' | simpleMask:'999.999.999-99' }}<p>

output:

<p>123.321.123-12</p>

example with add patterns

<p>{{ 'asd-123' | simpleMask:'aaa-II':{'I': '[0-9]' } }}<p>

output:

<p>asd-12</p>

example with new patterns(ignoring old patterns)

<p>{{ '123-bddd' | simpleMask:'III-aaa':{'I': '[0-9]' }:true }}<p>

output:

<p>123-aaa</p>

Patterns

Default patterns:

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

<input
    simpleMask="IIIxxx"
    [newPatterns]="{ 'I': '[a-z]', 'x': '[0-9]' }">

example of input: abc123

Add patterns

The set strings will be used as regex

<input simpleMask="~III999" [addPatterns]="{ 'I': '[a-z]' }">

example of input: +abc123

angular-library-starter

The project was built with angular-library-starter.

License

MIT