Working Input Mask on v7 Input Changes

Ionic Framework Ionic Angular
1

So I had a nice working input mask directive that worked in Ionic v6 leveraging the IMask library:

@Directive({
  selector: '[appMask]',
  providers: [IonInput],
})
export class MaskDirective {
  @Input('appMask') mask: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    IMask(this.el.nativeElement, {
      mask: this.mask
    });
  }
}

However v7 introduced major changes to the ion-input element. I tried updating my mask directive to pull the raw input element for use with the mask, but there is some async event writing to the input value apparently and causing a delay in the mask being written.

  // Doesn't Work
  if (this.el.nativeElement.localName === 'ion-input') {
      this.el.nativeElement.getInputElement().then((input: HTMLInputElement) => {
        const mask = IMask(input, {
          mask: this.mask,
        });
      });
   }

Has anyone been able to apply an input mask in v7? I am not tied to using the IMask library, but I would rather leverage something that gives me flexible mask support than writing my own regex for everything I need.

2

You may use maskito library for input masking as given in Ionic 7 docs.

import {MaskitoOptions} from '@maskito/core';

export const userNameMask: MaskitoOptions = {
    mask: /^[a-zA-Z\s]{0,40}$/,
   
};

 <ion-textarea 
              [maskito]="capitalCaseMask"
              [maskitoElement]="maskPredicate"
              label="" >
            </ion-textarea>

for more examples
///https://www.youtube.com/watch?v=4moebFaPONw

1 Like
3

Thanks @techbinomial . Here is the official blog post: Announcing Ionic v7.1 - Ionic Blog