- I no longer have the maintenance for this project, in case anyone wants to take over just contact me
return custom mask in input for ionic 4
- Node: 10.7.0
- npm 6.4.0
- ionic 4.1.2
- Angular CLI: 6.1.2
npm install br-mask --save -Eimport { BrMaskerModule } from 'br-mask';
@NgModule({
imports: [
BrMaskerModule
],
}) <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><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><ion-item>
<ion-input type="text" name="cpf" formControlName="mask" placeholder="CPF/CNPJ" [brmasker]="{person: true}"></ion-input>
</ion-item><ion-item>
<ion-input type="text" name="money" formControlName="mask" placeholder="(R$) Real" [brmasker]="{money: true}"></ion-input>
</ion-item><ion-item>
<ion-input type="text" formControlName="mask" name="money" placeholder="Money" [brmasker]="{money: true, thousand: ',', decimalCaracter: '.', decimal: '3'}"></ion-input>
</ion-item><ion-item>
<ion-input type="text" name="money" formControlName="mask" placeholder="(R$) Real" [brmasker]="{money: true, decimal: 3}"></ion-input>
</ion-item><ion-item>
<ion-input type="text" name="percent" formControlName="mask" placeholder="% Percent" [brmasker]="{percent: true}" value=""></ion-input>
</ion-item><ion-item>
<ion-input type="text" name="phone" formControlName="mask" placeholder="Phone" [brmasker]="{phone: true}"></ion-input>
</ion-item><ion-item>
<ion-input type="text" name="phone" formControlName="mask" placeholder="Phone" [brmasker]="{phoneNotDDD: true}"></ion-input>
</ion-item><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>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);
}- 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 |
moneyInitHasInt is when you need to use cents in value
- . / ( ) , * + @ # $ & % :
npm run buildnpm publish- pull issues
- change phone mask for accept 11 digits
- removing the need to declare the form
- remove console log
- add prop moneyInitHasInt
- add phoneNotDDD
- fix numberAndTousand
- add number thousand
- Inicial project
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent