Is there any ionic input mask module to use?

Ionic Framework
1

I want to add a phone number and ssn mask for my ionic inputs and I was wondering if there is any module out there for it? Iā€™m using ionic 5.

1 Like
2

hi! Did you find anyone?

3

no. I ended up adding a directory like following

const ssnMask = [/[0-8]/, /\d/, /\d/, "-", /[0-9]/, /\d/, "-", /[0-9]/, /\d/, /\d/, /\d/];
@Directive({
   selector: "[appSsnMask]",
   providers: [IonInput],
})
export class SsnMaskDirective implements OnInit, OnDestroy {
   private onDestroy = new Subject<void>();

   constructor(public ionInput: IonInput) {}

   public ngOnInit() {
      this.configureInput();
   }

   public ngOnDestroy() {
      this.onDestroy.next();
   }

   public async configureInput() {
      const input = await this.ionInput.getInputElement();
      const maskedInput = createTextMaskInputElement({
         inputElement: input,
         mask: ssnMask,
         guide: false,
      });
      this.ionInput.ionChange.pipe(takeUntil(this.onDestroy)).subscribe((event: CustomEvent) => {
         const { value } = event.detail;
         maskedInput.update(value);
         this.ionInput.value = input.value;
      });
   }
}

used this for phone number: [ā€™(ā€™, /[1-9]/, /\d/, /\d/, ā€˜)ā€™, ā€™ ', /[0-9]/, /\d/, /\d/, ā€˜-ā€™, /[0-9]/, /\d/, /\d/, /\d/,]