We're sorry, but we'll focus only on one library
return custom mask in input for angular 4
- node v8.4.0 or up
- npm 5.4.2 or up
- @angular/cli: 1.4.4
npm install brmasker4 --save<input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}" value="">import { BrMasker4Module } from 'brmasker4';
@NgModule({
imports: [
BrMasker4Module
],
})import { BrMaskerDirective, BrMaskModel } from 'brmasker-ionic-3';
...
constructor(public brMaskerDirective: BrMaskerDirective) {}
...
protected createForm(): FormGroup {
return new FormGroup({
phone: new FormControl(this.createPhone())
});
}
private createPhone(): string {
const config: BrMaskModel = new BrMaskModel();
config.phone = true;
return this.brMaskerDirective.writeCreateValue('99999999999', config);
}- brmasker: BrModel
BrModel = {
mask: string;
len: number;
money: boolean;
phone: boolean;
person: boolean;
}| Name | type | info |
|---|---|---|
| mask | string | Optional |
| len | string | Optional |
| money | boolean | Optional |
| decimal | number | Optional for 'money', default '2' |
| phone | boolean | Optional |
| person | boolean | Optional |
| percent | boolean | Optional |
| type | string | Optional default 'all' |
<input type="text" name="cpf" placeholder="CPF/CNPJ" [brmasker]="{person: true}" value=""><input type="text" name="money" placeholder="(R$) Real" [brmasker]="{money: true}" value=""><input type="text" name="phone" placeholder="Phone" [brmasker]="{phone: true}" value="">- . / ( ) , * + @ # $ & %
[brmasker]="{mask:'000.000.000-00', len:14}"
[brmasker] = component receive array (mask, len)
mask --> required / default = '' / custom mask
len --> required / default = 0 / number of length
[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 buildnpm publish-
for angular 6 using version 1.0.2
-
for angular 5 using version 1.0.1
-
support for angular 6
-
news updates
- fix number in person and phone
- Suport reactive form
- custom phone, money and person mask