angular - ionic 3输入口罩

掩盖ion-input元素的最佳方法是什么？例如电话号码...是这样的：

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

最佳答案

3个步骤：
==> 1-创建指令。
==> 2-通过放置在声明数组中导入到主模块。
==> 3-使用html文件中的指令。


第1步

    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;
        }
    }

第2步

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

第三步

<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>

关于angular - ionic 3输入口罩，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45198560/