New version for ionic 4 br-mask
return custom mask in input for ionic 3
- node v8.2.1 or up
- npm 5.3.0 or up
- ionic 3.9.2
npm install brmasker-ionic-3 --save
import { BrMaskerModule } from 'brmasker-ionic-3';
@NgModule({
imports: [
BrMaskerModule
],
})
<ion-item>
<ion-input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}"></ion-input>
</ion-item>
<input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}" value="">
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);
}
- 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 |
<ion-item>
<ion-input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{mask:'00/00/0000', len:10, type:'alfa'}"></ion-input>
</ion-item>
<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>
<ion-input type="text" placeholder="Use special character" [brmasker]="{mask:'00-00', len:5, userCaracters: true}"></ion-input>
<ion-item>
<ion-input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{person: true}"></ion-input>
</ion-item>
<input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{person: true}" value="">
<ion-item>
<ion-input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true}"></ion-input>
</ion-item>
<ion-item>
<ion-input type="text" formControlName="money" name="money" placeholder="Money" [brmasker]="{money: true, thousand: ',', decimalCaracter: '.', decimal: '3'}"></ion-input>
</ion-item>
<input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true}" value="">
<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>
<ion-item>
<ion-input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true, decimal: 3}"></ion-input>
</ion-item>
<input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true, decimal: 3}" value="">
<input type="text" name="percent" placeholder="% Percent" [brmasker]="{percent: true}" value="">
<ion-item>
<ion-input type="text" name="phone" placeholder="Phone" [brmasker]="{phone: true}"></ion-input>
</ion-item>
<input type="text" name="phone" placeholder="Phone" [brmasker]="{phone: true}" value="">
- . / ( ) , * + @ # $ & % :
[brmasker]="{mask:'00/00/0000', len:10}"
[brmasker]="{mask:'00.000-000', len:10}"
[brmasker]="{mask:'000.000.000-00', len:14}"
[brmasker]="{mask:'00.000.000/0000-00', len:18}"
[brmasker]="{mask:'(00) 0000-0000', len:14}"
[brmasker]="{mask:'(00) 00000-0000', len:15}"
npm run build
npm publish
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
- add phoneNotDDD
- fix numberAndTousand for number null
- fix exports
- fix publish
- add services for mask
- add thousand in number
- fix tag
- adding special character shape
- Remove DevDependencies for fix bugs
- New mask for money, add thousand
- Refactored moneyMask so it includes a leading 0 for when we have only
- Create a writeCreateValue for initial value
- Change name model from
BrModel
toBrMaskModel
- Add decimal in money mask
- Fix mask type caracter
- Fix mask caracter
:
- Fix mask pool
- Replace percent symbol
- percent mask #pull #23
- fix(events): ionic has changed event names #pull #22
- Updating devdependencies
- fix number in phone and person
- fix compiler project for npm
- Suport reactive form