コンマが追加されたときにキャレットが後ろに移動しています

Question

私はイオン（および角度）を使用しています。私はDecimalPipeを使ってそれを変換した後に入力値を変更する命令を持っています。値は数値のみです。

数値にカンマを追加すると（たとえば、ユーザーが値を100から1000に変更した場合など）、カーソルが1か所後ろに移動しているという問題があります。 カンマが追加されても気にしないようです。

マイコード：

let decimalPipe = new DecimalPipe(window.navigator.language); 
    val = decimalPipe.transform(val, this.numberDecimal()); 


    this.model.valueAccessor.writeValue(val); 
    this.renderer.setElementProperty(this.elementRef.nativeElement.querySelector('input'), 'value', val); 

    this.model.viewToModelUpdate(val); 

modelはタイプNgControlであり、rendererはタイプRendererです。

Answer 1

問題はAndroid搭載端末のみでした。解決策が見つかりませんでしたので、0ミリ秒のタイムアウト後にキャレットの位置を変更する回避策を作成しました。

// before the change 
let inputElem = this.elementRef.nativeElement.querySelector('input'); 
let caretPos = inputElem.selectionStart; 
let numOfCommas = (value.match(/,/g) || []).length; 
... 

//after the change 
let newNumOfCommas = (val.match(/,/g) || []).length; 
if (newNumOfCommas != numOfCommas) 
{ 
    setTimeout(() => 
    { 
     let pos = newNumOfCommas > numOfCommas ? caretPos+1 : caretPos - 1; 
     inputElem.setSelectionRange(pos, pos); 
    }, 0); 
}