Br-mask NPM | npm.io

deprecated

I no longer have the maintenance for this project, in case anyone wants to take over just contact me

brmasker-ionic

return custom mask in input for ionic 4

Required

Node: 10.7.0
npm 6.4.0
ionic 4.1.2
Angular CLI: 6.1.2

install

npm install br-mask --save -E

Usage

import { BrMaskerModule } from 'br-mask';

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

HTML

 <form [formGroup]="form">
    <ion-item>
      <ion-input required type="text" formControlName="mask"  placeholder="First Name" [brmasker]="{mask:'00-00', len:5, userCaracters: true}"></ion-input>
    </ion-item>
  </form>

Other Examples

<ion-item>
    <ion-input type="text" formControlName="mask"  placeholder="Mask" [brmasker]="{mask: '00:00', type:'num'}"></ion-input>
</ion-item>

<ion-item>
    <ion-input type="text" formControlName="mask"  placeholder="Mask" [brmasker]="{userCaracters: true}"></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" formControlName="mask" placeholder="CPF/CNPJ" [brmasker]="{person: true}"></ion-input>
</ion-item>

Example for Real 999,99

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

Example for Money

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

Example for Real 99,999 With Decimal

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

Example for Real 99,999 With Decimal

<ion-item>
	<ion-input type="text" name="percent" formControlName="mask" placeholder="% Percent" [brmasker]="{percent: true}" value=""></ion-input>
</ion-item>

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

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

Example for Phone not ddd 9999-9999 / 99999-9999

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

Example for number thousand

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

Features

import { BrMaskDirective, BrMaskModel } from 'br-mask';

...

constructor(public brMask: BrMaskDirective) {}

...

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

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

Inputs

brmasker: BrMaskModel

	BrMaskModel = {
		form: AbstractControl;
		mask: string;
		len: number;
		money: boolean;
		phone: boolean;
		phoneNotDDD: boolean;
		person: boolean;
		percent:boolean;
		type: 'alfa' | 'num' | 'all';
		decimal: number = 2;
		decimalCaracter: string = `,`;
		thousand: string;
		userCaracters = false;
		numberAndTousand: false,
		moneyInitHasInt: true
	}

Name	type	info
form	FormControl	Obsolete
mask	string	Optional
len	string	Optional
money	boolean	Optional
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`
moneyInitHasInt	boolean	Optional default `true`