brmasker-ionic

return custom mask in input for ionic 3

Required

• node v8.2.1 or up
• npm 5.3.0 or up
• ionic 3.9.2

install

npm install brmasker-ionic-3 --save

HTML

correct usage

<ion-item>
	<ion-input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}"></ion-input>
</ion-item>

usage in input

<input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}" value="">

Module

import { BrMaskerModule } from 'brmasker-ionic-3';

@NgModule({
  imports: [
    BrMaskerModule
  ],
})

Inputs

• brmasker: BrModel

	BrModel = {
	 mask: string;
	 len: number;
	 money: boolean;
	 phone: boolean;
	 person: boolean;
	 percent:boolean;
	 type: 'alfa' | 'num' | 'all'
	}

Name	type	info
mask	string	Optional
len	string	Optional
money	boolean	Optional
phone	boolean	Optional
person	boolean	Optional
percent	boolean	Optional
type	string	Optional default 'all'

Exemple use of alphanumeric characters

<ion-item>
	<ion-input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{mask:'00/00/0000', len:10, type:'alfa'}"></ion-input>
</ion-item>

Exemple use of number characters

<ion-item>
	<ion-input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{mask:'00/00/0000', len:10, type:'num'}"></ion-input>
</ion-item>

Exemple use of all characters

<ion-item>
	<ion-input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{mask:'00/00/0000', len:10, type:'all'}"></ion-input>
</ion-item>

Exemple for CPF/CNPJ 999.999.999-99 / 99.999.999/9999-99

<ion-item>
	<ion-input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{person: true}"></ion-input>
</ion-item>

usage in input

<input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{person: true}" value="">

Exemple for Real 999,99

<ion-item>
	<ion-input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true}"></ion-input>
</ion-item>

usage in input

<input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true}" value="">

Exemple for Percent 1% / 100%

<input type="text" name="percent" placeholder="% Percent" [brmasker]="{percent: true}" value="">

Exemple for Phone (99) 9999-9999 / (99) 99999-9999

<ion-item>
	<ion-input type="text" name="phone" placeholder="Phone" [brmasker]="{phone: true}"></ion-input>
</ion-item>

usage in input

<input type="text" name="phone" placeholder="Phone" [brmasker]="{phone: true}" value="">

Characters

- . / ( ) , * + @ # $ & % :

data

[brmasker]="{mask:'00/00/0000', len:10}"

cep

[brmasker]="{mask:'00.000-000', len:10}"

custom cpf

[brmasker]="{mask:'000.000.000-00', len:14}"

custom cnpj

[brmasker]="{mask:'00.000.000/0000-00', len:18}"

custom telefone

[brmasker]="{mask:'(00) 0000-0000', len:14}"

custom whatsapp

[brmasker]="{mask:'(00) 00000-0000', len:15}"

Build for developer

Only use if you change the component

Build

npm run build

Publish

npm publish

Changelog

v1.0.8

• Fix mask type caracter

v1.0.7

• Fix mask caracter :

v1.0.6

• Fix mask pool

v1.0.5

• Replace percent symbol

v1.0.4

• percent mask #pull #23
• fix(events): ionic has changed event names #pull #22

v1.0.3

• Updating devdependencies

v1.0.2

• fix number in phone and person

v1.0.1

• fix compiler project for npm

v1.0.0

• Suport reactive form