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('[-\+]')
};

Examples

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