@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
}
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
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.