katyelen-ionic-3

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 katyelen-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 [phone]

<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:'[phone]', 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 

Changelog

v1.6.3

• add phoneNotDDD

v1.5.3

• fix numberAndTousand for number null

v1.5.2

• fix exports

v1.5.1

• fix publish

v1.5.0

• add services for mask

v1.4.0

• add thousand in number

v1.3.1

• fix tag

v1.3.0

• adding special character shape

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