@rodrigorhas/brmask v0.0.2

@rhas/brmask

Angular library project forked from amarkes/br-mask.

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
}

moneyInitHasInt is when you need to use cents in value

Characters

- . / ( ) , * + @ # $ & % :

Development Tips

Build

Run ng build rodrigorhas-brmask to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build rodrigorhas-brmask, go to the dist folder cd dist/rodrigorhas-brmask and run npm publish.

Running unit tests

Run ng test rodrigorhas-brmask to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.