角2：入力時に「数字」パイプの問題

Question

通貨のように表示したい入力があります。小数点以下の桁数は2桁にして、必要なときに自動的にコンマを追加しながら数字だけを許可します。基本的に、ユーザーが「12345」と入力すると、自動的に入力が「12,345.00」と表示されます。 「12,345」も許容されますが、「12345.5」と入力すると「12,345.50」と表示する必要があります。私はこれを達成するためにパイプを使用しようとしており、通貨記号が表示されないようにするために "数字"パイプを使用することに決めました（私はすでに入力の前​​にラベルとしてドル記号を持っています）。私はいくつかの問題を抱えている

<input [ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)" class="form-control" id="Amount" name="Amount" tabindex="4" type="number" autocomplete="off"> 

：

は、ここに私のコードです。

1. 代わりに、私は番号を入力すると、それが自動的に罰金である、最後に小数点と2 0が追加されますが、私は「55」と入力した場合ので、それはまた、そのの一番最後にカーソルを追加「55.00」と表示されている場合、「5.01」と表示されます（5.005と解釈してから5.01に丸めます）。最後にカーソルが移動しないようにするにはどうしたらいいですか？
2. このフィルタは実際に入力を小数点以下2桁に限定していません。 「1234」と入力すると、「1.00234」と表示されます。また、小数点を複数追加することもできます。どのようにしてそれを2桁で1小数点に制限できますか？
3. 誤った入力でこのパイプを折るのは本当に簡単です。

「パイプのための 『無効な引数'11 .00a DecimalPipe』

後：たとえば、手紙の中でユーザーの種類ならば、私は次のように述べているコンソールでエラーが発生しますこのエラーは、フィルタが完全に機能しなくなります。

私は type="number"への入力を設定した場合

と私は1234年に入力した値は1234になりますが、入力は消え、私は私のコンソールで、次のメッセージが表示されます。

指定された値「1234 "は有効な番号ではありません。値は次の正規表現に一致する必要があります。 - ？（\ d + | \ d +。\ d + |。\ d +）（[eE] [ - +]？\ d +）？ jQueryのInputmaskを使用して

は私に、入力/表示制限の点では、私が望む結果が得られますが、誰かが道を知っているしない限り、それは私のngModelを壊し、それは私のためのオプションではありませんので、空に値を設定しますその周りに。

パイプを変更して、私が望む結果を得ることができますか？これをどのように機能させることができますか？ここで

Answer 1

は、入力をマスキングするための前述のインスピレーションディレクティブです：最後の文字がアルファまたは長さが過去小数> 2である場合

<input decimal [(ngModel)]="Amount" 
    class="form-control" id="Amount" name="Amount" tabindex="4" autocomplete="off"> 

チェックガード： https://plnkr.co/edit/aBvO2F?p=preview

import { Directive } from "@angular/core"; 
import { NgControl } from "@angular/forms"; 

@Directive({ 
    selector: '[ngModel][decimal]', 
    host: { 
    '(ngModelChange)': 'onInputChange($event)' 
    } 
}) 
export class DecimalMask { 
    constructor(public model: NgControl) {} 

    onInputChange(event, backspace) { 
    var valArray = event.toString().split('.') : []; 
    for(var i = 0; i < valArray.length; ++i) { 
     valArray[i] = valArray[i].replace(/\D/g, ''); 
    } 

    var newVal: number; 

    if(valArray.length === 0) { 
     newVal = ''; 
    } 
    else { 
     let matches = valArray[0].match(/[0-9]{3}/mig); 

     if(matches !== null && valArray[0].length > 3) { 
     let commaGroups = Array.from(Array.from(valArray[0]).reverse().join('').match(/[0-9]{3}/mig).join()).reverse().join(''); 
     let replacement = valArray[0].replace(commaGroups.replace(/\D/g, ''), ''); 

     newVal = (replacement.length > 0 ? replacement + "," : "") + commaGroups; 
     } else { 
     newVal = valArray[0]; 
     } 

     if(valArray.length > 1) { 
     newVal += "." + valArray[1].substring(0,2); 
     } 
    } 
    // set the new value 
    this.model.valueAccessor.writeValue(newVal); 
    } 
} 

入力要素は次のようになります。

ngDoCheck() { 
    console.log(this.Amount); 
    if(this.Amount) { 
     this.Amount = this.Amount.replace(/[A-Za-z]/g, ''); 
     if(this.Amount.indexOf('.') !== -1) { 
     var arrayVals = this.Amount.split('.'); 
     this.Amount = arrayVals[0] + "." + arrayVals[1].slice(0,2); 
     } 
    } 
    }