Ionic 3 input mask

Question

What is the best way to mask an ion-input element? For example phone numbers... something like this:

<ion-input type="tel" placeholder="celular" name="celular"
 [(ngModel)]="phone_number" required
 mask="(**)*****-****" ></ion-input>

Answer 1

• 3 steps:

• ==>1 - create a Directive.

• ==>2 - import to the main module by placing in the declarations array.
• ==>3 - use the directive in the html file.

step1

    import { Directive, Attribute } from '@angular/core';
    import { NgModel } from '@angular/forms';
    @Directive({
      selector: '[mask]',
      host: {
          '(keyup)': 'onInputChange($event)'
      },
      providers: [NgModel]
    })
    export class Mask {
        maskPattern: string;
        placeHolderCounts: number;
        dividers: string[];
        modelValue: string;
        viewValue: string;

        constructor(
            public model: NgModel,
            @Attribute("mask") maskPattern: string
        ) {
            this.dividers = maskPattern.replace(/\*/g, "").split("");
            this.dividers.push(" ");
            this.generatePattern(maskPattern);
    }

    onInputChange(event) {
        this.modelValue = this.getModelValue(event);
        let stringToFormat = this.modelValue;
        if (stringToFormat.length < 10) {
            stringToFormat = this.padString(stringToFormat);
        }

        this.viewValue = this.format(stringToFormat);
        this.writeValue(event.target, this.viewValue);
    }

    writeValue(target, value) {
        return target.value = value;
    }

    generatePattern(patternString) {
        this.placeHolderCounts = (patternString.match(/\*/g) || []).length;
        for (let i = 0; i < this.placeHolderCounts; i++) {
            patternString = patternString.replace('*', "{" + i + "}");
        }
        this.maskPattern = patternString;
    }

    format(s) {
        var formattedString = this.maskPattern;
        for (let i = 0; i < this.placeHolderCounts; i++) {
            formattedString = formattedString.replace("{" + i + "}",         s.charAt(i));
            }
            return formattedString;
        }

        padString(s) {
            var pad = "          ";
            return (s + pad).substring(0, pad.length);
        }

        getModelValue(event) {
            var modelValue = event.target.value;
            for (var i = 0; i < this.dividers.length; i++) {
                while (modelValue.indexOf(this.dividers[i]) > -1) {
                    modelValue = modelValue.replace(this.dividers[i], "");
                }
            }
            return modelValue;
        }
    }

• step2

  import { Mask } from'./Mask';
  @NgModule({
    declarations: [
      MyApp,
      HomePage,
      Mask
  ],
  

• step3

  <form>
      <ion-list>
        <ion-item>
          <ion-input type="text" mask="(**)****-****"></ion-input>
        </ion-item>
      </ion-list>
      <button ion-button block type="submit">Save</button>
    </form>