Brmasker-ionic-3 NPM

brmasker-ionic

New version for ionic 4 br-mask

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
  ],
})

Only Example

VSCODE

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;
		phoneNotDDD: boolean;
		person: boolean;
		percent:boolean;
		type: 'alfa' | 'num' | 'all';
		decimal: number = 2;
		decimalCaracter: string = `,`;
		thousand: string;
		userCaracters = false;
		numberAndTousand = false;
	}

Name	type	info
mask	string	Optional
len	string	Optional
money	boolean	Optional
decimal	number	Optional for 'money', default '2'
phone	boolean	Optional
phoneNotDDD	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
userCaracters	boolean	Optional default `false`
numberAndTousand	boolean	Optional default `false`

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>

<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 use of all characters

<ion-input type="text" placeholder="Use special character" [brmasker]="{mask:'00-00', len:5, userCaracters: true}"></ion-input>

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 thousand number

<ion-item>
	<ion-input type="tel" formControlName="phone" [value]="form.get('phone').value" name="phone" placeholder="Phone" [brmasker]="{numberAndTousand: true, thousand: ','}"></ion-input>
</ion-item>

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

use in services

import module BrMaskerModule and service import BrMaskerIonicServices3

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

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


import { Injectable } from '@angular/core';
import { BrMaskerIonicServices3, BrMaskServicesModel } from 'brmasker-ionic-3';

@Injectable()
export class Util {
  constructor(private brMasker: BrMaskerIonicServices3) { }

  mascaraCPFCNPJ(valor: string) {
    return this.brMasker.writeValuePerson(valor);
  }
}

writeCreateValue(value: string, config: BrMaskServicesModel): string

writeValuePercent(value: string): string

writeValuePerson(value: string): string

writeValueMoney(value: string, config: BrMaskServicesModel = new BrMaskServicesModel()): string

writeValueNumberAndThousand(value: string, config: BrMaskServicesModel = new BrMaskServicesModel()): string

writeValueusingSpecialCharacters(value: string, config: BrMaskServicesModel = new BrMaskServicesModel()): string