brmasker-ionic-3

mascara para inputs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
brmasker-ionic-3
112201.6.35 years ago6 years agoMinified + gzip package size for brmasker-ionic-3 in KB

Popular Searches

Readme

brmasker-ionic
GitHub issues GitHub stars GitHub forks GitHub license Build Status

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