Mask for ion-input

Feature Request

Masks for inputs on Ionic v4

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

System:

   NodeJS : v9.1.0 (/usr/local/bin/node)
   npm    : 5.5.1
   OS     : Linux 4.4

Describe the Feature Request Being able to natively add masks to ion-input, a pretty standard feature for most applications.

Describe Preferred Solution

<ion-input mask="[phone]" mask-placeholder="_"></ion-input>

[clmntr]

Based on @adamduren solution, here is a more generic directive :

// Angular
import { Directive, Input } from '@angular/core';

// Ionic
import { IonInput } from '@ionic/angular';

// Rxjs
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

// Text-mask
import { createTextMaskInputElement } from 'text-mask-core';

/**
 * ion-mask directive, based on text-mask module
 */
@Directive({
  selector: '[ionMask]',
  providers: [IonInput],
})
export class IonMask {

  @Input('ionMask') 
  private mask            : Array<any>    = [];
  private onDestroy       : Subject<void> = 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          : this.mask,
      guide         : false
    });
    this.ionInput
      .ionChange
      .pipe( takeUntil( this.onDestroy ) )
      .subscribe( ( event: CustomEvent ) => {
        const { value } = event.detail;
        maskedInput.update(value);
        this.ionInput.value = input.value;
      });
  }

}

Use it like that in your component’s template :

<ion-input formControlName="controlName" [ionMask]="mask"></ion-input>

And in your component’s controller :

public mask : Array<any>  = [ 'y','o', 'u', 'r', ' ', 'm', 'a', 's', 'k' ]

[mateusduraes]

+1