Using ion-input with mask

Angular Mar 28, 2021

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.