ionic-mask

ionic-mask.md

ionic-mask

use

 <ion-input mask="(**)*****-****" type='tel' formControlName="phoneNumber"></ion-input>

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) {
        this.model.update.emit(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) {
        let formattedString = this.maskPattern;
        for (let i = 0; i < this.placeHolderCounts; i++) {
            formattedString = formattedString.replace("{" + i + "}", s.charAt(i));
        }
        return formattedString;
    }

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

    getModelValue(event) {
        let modelValue : string = event.target.value;
        for (let i = 0; i < this.dividers.length; i++) {
            while (modelValue.indexOf(this.dividers[i]) > -1) {
                modelValue = modelValue.replace(this.dividers[i], "");
            }
        }
        if(event.keyIdentifier === "U+0008" || event.keyCode === 8 || event.key === 'Backspace'){
            modelValue = modelValue.substring(0, modelValue.length -1);
        }
        return modelValue;
    }
}