OpenUI5 sap.m.输入货币格式答案

【问题标题】：OpenUI5 sap.m.Input Currency FormattingOpenUI5 sap.m.输入货币格式
【发布时间】：2017-08-04 15:38:48
【问题描述】：

这看起来有很多不同的答案，但我似乎无法让它与我的实现一起工作。我正在尝试格式化和限制 sap.m.Input 元素中的数据。我目前有以下：

var ef_Amount = new sap.m.Input({
  label: 'Amount',
  textAlign: sap.ui.core.TextAlign.Right,
  value: {
    path: '/amount',
    type: 'sap.ui.model.type.Currency'
  }
});

第一个问题是它破坏了数据绑定。当我检查提交给服务器的原始数据（使用 Fiddler）时，它是一个像这样的数组：

"amount": [1234.25,null]

服务器需要一个数字，因此数组存在问题。

当我使用以下内容时，绑定可以正常工作，但不执行格式化。

var ef_Amount = new sap.m.Input({
  label: 'Amount',
  textAlign: sap.ui.core.TextAlign.Right,
  value: '{/amount}'
});

第二个问题是输入的数据不限于数字。

我尝试使用 sap.m.MaskedInput 代替，但我不喜欢占位符的用法，因为我不知道要输入的数字的大小。

最后，如果焦点放在输入字段上时，所有格式都被删除并在焦点丢失时再次重新格式化，这将是很好的。

我应该考虑使用 jQuery 还是原始 Javascript 来代替？

感谢您的关注。

【问题讨论】：

使用标签 sapui5，您可以接触到更多用户。标签 sapui5 涵盖 sapui5 和 openui5

标签： formatting sapui5 currency

【解决方案1】：

根据文档，数组输出是正常的。所以你需要教你的服务器在提交前接受这种格式或预处理数据；
此类型并非旨在限制您的数据输入；
很好的特性，但是ui5不支持这个，因为Type对象对控制一无所知，它是像“焦点”这样的事件，它只处理数据输入输出。因此，您必须通过扩展控件或其他方式自行实现此功能。

我建议单独使用金额和货币。可能应该只允许用户输入有效货币，因此您可以使用带有可用货币建议的组合框。

【讨论】：

好的，根据这些信息，扩展控件似乎是我最好的选择，以便将数据输入限制为货币，并找到一种方法来取消格式化/格式化数据以获得焦点/损失。
我可以想象以下解决方案： 1.您在“Input”控件上处理“focusin”和“focuseout”事件； 2.当用户关注时，您将控件重新绑定到相同的路径但不使用数据类型（它会将值转换为原始格式） 3.当用户关注时，您将控件绑定到相同的路径但使用 WITH数据类型（类型填充格式您的数据） 4.您可以通过使用输入的“liveChange”事件来防止用户输入废话（使用正则表达式替换错误的字符）
模型中的绑定数据项在重新绑定“值”属性之前似乎没有更新。我最终会显示和格式化旧数据。不会碰巧发生类似“afterfocusout”事件吗？以这种方式首先更新数据模型。
如果你在 Plunker 中这样做会很棒，因为研究编码要容易得多，我可以看看并提出一些建议，你可以以这个模板plnkr.co/edit/qBNu4T 为基础。跨度>
好的，我在 Plunker (plnkr.co/edit/WgIMPfaY1TN5ibX6A6t3) 中将一些非常快速的代码散列在一起。我在焦点输出中使用格式化程序。这允许我格式化数字并且不会破坏服务器正在寻找的绑定。因此，输入字段使用默认值加载，但如果我输入不同的数字，例如 1400.67 并更改焦点，则输入字段的初始数据值会被格式化和设置。

【解决方案2】：

所以，经过@Andrii 的大量工作和帮助，我设法让它工作起来。主要问题是 onfocusout 破坏了模型的更新和触发的 change 事件。只需将 onfocusout 替换为 onsapfocusleave 即可解决问题。

我的自定义控件的init方法中的最终代码：

var me = this;
var numberFormat = sap.ui.core.NumberFormat.getCurrencyInstance({maxFractionDigits: 2});

me.addEventDelegate({
  onAfterRendering: function() {
    // for formatting the figures initially when loaded from the model
    me.bindValue({
      path: me.getBindingPath('value'),
      formatter: function(value) {
         return numberFormat.format(value);
      }
    });
  },
  onfocusin: function() {
    // to remove formatting when the user sets focus to the input field
    me.bindValue(me.getBindingPath('value'));
  },
  onsapfocusleave: function() {
    me.bindValue({
      path: me.getBindingPath('value'),
      formatter: function(value) {
        return numberFormat.format(value);
      }
    });
  }
});

【讨论】：