【SAPUI5】Inputにてfocusアウト時にカンマ付き数値に変換

はじめに

sap.ui.core.format.NumberFormatを使用し、数値をカンマ付き数値に変換する方法を紹介します。
この例ではInputの入力内容変更時にカンマつけの処理が実装されるようにしています。

NumberFormatを使ってみる

1. "sap/ui/core/format/NumberFormat"を読み込み

NumberFormat.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/format/NumberFormat"
], function (Controller, NumberFormat) {

2. oIntNumberFormatを定義

NumberFormat.controller.js

    var oIntNumberFormat = NumberFormat.getIntegerInstance({
        maxFractionDigits: 0,
        groupingEnabled: true
    }, sap.ui.getCore().getConfiguration().getLocale());

3. ファンクションを定義

NumberFormat.controller.js

    intformat: function (value) {
            return oIntNumberFormat.format(value);
    }

4. ファンクションを呼び出し

NumberFormat.view.xml

    <Input id="input" change="onChange" width="15rem"/>

NumberFormat.controller.js

    onChange: function() {
            // Inputボックスの入力内容を取得
            var text = this.getView().byId("input").getValue();
            // カンマつけして画面へ再設定
            this.getView().byId("input").setValue(this.intformat(text));
        }

実行結果

下記のように、フォーカスアウト時に、カンマ付き数値に変換することができました。
今回の例では、数値以外を入力することはありませんでしたが、数値以外の文字列が入力される
可能性がある場合は考慮が必要となります。