rafaelzuckerberg/br-masker-ionic-3

mascara para inputs

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

Usage

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

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

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="">

Features

import { BrMaskerIonic3, BrMaskModel } from 'brmasker-ionic-3';

...

constructor(public brMaskerIonic3: BrMaskerIonic3) {}

...

protected createForm(): FormGroup {
  return new FormGroup({
    phone: new FormControl(this.createPhone())
  });
}

private createPhone(): string {
  const config: BrMaskModel = new BrMaskModel();
  config.phone = true;
  return this.brMaskerIonic3.writeCreateValue('99999999999', config);
}

Inputs

• brmasker: BrMaskModel

	BrMaskModel = {
	 mask: string;
	 len: number;
	 money: boolean;
         decimal: number;
	 phone: boolean;
	 person: boolean;
	 percent:boolean;
	 type: 'alfa' | 'num' | 'all';
	 decimal: number = 2;
  	 decimalCaracter: string = `,`;
  	 thousand: string;
	}

Name	type	info
mask	string	Optional
len	string	Optional
money	boolean	Optional
decimal	number	Optional for 'money', default '2'
phone	boolean	Optional
person	boolean	Optional
percent	boolean	Optional
type	string	Optional default 'all'
decimalCaracter	string	Optional default ','
decimal	number	Optional default '2'
thousand	string	Optional

Example 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>

Example 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>

Example 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>

Example 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="">

Example for Real 999,99

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

Example for Money

<ion-item>
	<ion-input type="text" formControlName="money" name="money" placeholder="Money" [brmasker]="{money: true, thousand: ',',  decimalCaracter: '.', decimal: '3'}"></ion-input> 
</ion-item>

usage in input

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

Example for Real 99,999 With Decimal

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

usage in input

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

Example for Percent 1% / 100%

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

Example 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.2.0

• Remove DevDependencies for fix bugs

v1.1.0

• New mask for money, add thousand

v1.0.11

• Refactored moneyMask so it includes a leading 0 for when we have only

v1.0.10

• Create a writeCreateValue for initial value
• Change name model from BrModel to BrMaskModel

v1.0.9

• Add decimal in money mask

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