イオン3入力パーセンテージマスク

Question

これを達成するためのアドバイスや勧告があります。入力マスク・ディレクティブを作成して、ユーザーが数値を入力できるようにすること、必要に応じて2小数点以下を入力すること、入力フィールドに％記号も含めることです。どんなアイデアか、またはこれのために既に構築されているものがあれば、非常に感謝されるでしょう、 事前に感謝！

Answer 1

次サムのアドバイス、：

<input type="tel" [(ngModel)]="percent" 
[textMask]="{mask: mask, pipe: percentage, guide:false}" /> 

と..

mask(obj) { 
    return [ /\d/, /\d|./, /\d|./, /\d/, /\d/ ]; 
}; 

percentage(value) { 
    var num = value.replace('%', ''); 
    if (isNaN(num)) { 
     if (num % 1 != 0) { 
      num = parseFloat(num).toFixed(2); 
     } 
     return num + '%'; 
    } else { 
     return false; 
    } 
} 

Answer 2

希望すればtext-maskモジュールを使用できます。

ただし、Ionic 3互換バージョンをインストールする必要があります。

npm install angular2-text-mask@8.0.2 --save 

として以下

変更package.json（すなわち^を除去）

"angular2-text-mask": "8.0.2", 

module

これは、多くの機能を有しています。上記のリンクを参照してください。

更新：あなたがLazy loadingを使用しているなら、あなたはpage's moduleまたはshared.module.tsのいずれかの内側にTextMaskModuleをインポートする必要がありますし、また、あなたはblur eventに表示される余分な文字を避けるためにion-inputにmaxlengthを設定する必要があります。テキストマスクで解決