イオン3入力マスク

Question

イオン入力要素をマスクする最良の方法は何ですか？例えば、電話番号については...このような何か：

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

Answer 1

• 3段階：

• ==> 1 - 指令を作成します。

• ==> 2 - 宣言配列に配置してメインモジュールにインポートします。
• ==> 3 - htmlファイルでディレクティブを使用します。

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>