Question

这看起来有很多不同的答案，但我似乎无法让它与我的实现一起工作。我试图格式化和限制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吗？

感谢您的关注。

Answer 1

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

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

Answer 2

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

自定义控件的 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);
      }
    });
  }
});

OpenUI5 sap.m.Input货币格式

2 个答案: