Using ion-input with mask
I have a long history using web technologies, and recently I needed to do a maintenance on a project Ionic, and I noticed which ion-input not still have support for the mask, but I found one way.
First, to install the https://www.npmjs.com/package/ngx-mask
npm i ngx-mask --save
Inside your project Ionic Angular 5 or up, we need to declare the module:
import { NgxMaskModule, IConfig } from 'ngx-mask';
...
@NgModule({
declarations: [...],
entryComponents: [...],
imports: [
...,
NgxMaskModule.forRoot(),
...
]
})
Now, head over to your element that you will use the mask:
<ion-input (ionChange)="updateWithMask($event)" formControlName="cpf"></ion-input>
Don't forget to declare the MaskPipe in your module, for example, login.module.ts
import { MaskPipe } from 'ngx-mask';
const routes: Routes = [
{
path: '',
component: LoginPage
}
];
@NgModule({
imports: [
...
],
declarations: [LoginPage],
providers: [
MaskPipe
]
})
export class LoginPageModule {}
```
And then, inside your controller to declare the function:
updateWithMask(event) { this.myForm.controls.cpf.setValue(this.maskPipe.transform(event.currentTarget.value, '000.000.000-00'));
}
Done! Now, you can use masks with the plugin ngx-mask without leave to use the component ion-input.