未为 SAPUI5 自定义控件定义 valueStateText

Question

我通过扩展 sap.m.Input 创建了以下自定义控件，它允许用户仅输入数字。但是，当实际出现错误时，控件状态会更改为带有红色边框的错误，但当它具有焦点时不会显示 valueStateText。如何获取自定义控件的 valueStateText？它不应该继承自sap.m.Input吗？

自定义控件代码：

sap.ui.define([
    "sap/m/Input"
], function (Control) {
    "use strict";
    return Control.extend("sample.control.NumericInput", {
        metadata: {
            properties: {},
            aggregations: {},
            events: {}
        },
        init: function () {
            if (sap.ui.core.Control.prototype.onInit) {
                sap.ui.core.Control.prototype.onInit.apply(this, arguments);
            }
            this.attachLiveChange(this.onLiveChange);
        },
        renderer: function (oRM, oControl) {
            sap.m.InputRenderer.render(oRM, oControl);
        },
        onLiveChange: function (e) {
            var _oInput = e.getSource();
            var val = _oInput.getValue();
            val = val.replace(/[^\d]/g, "");
            _oInput.setValue(val);
        }
    });
});

XML代码：

<hd:NumericInput value="{path:'payload>/MyNumber',type:'sap.ui.model.type.String',constraints:{minLength:1,maxLength:10}}" valueStateText="My Number must not be empty. Maximum 10 characters."/>

Answer 1

在您的 init 重写中，您需要调用父控件的 init（而不是 sap.ui.core.Control 的 onInit）。 sap.m.InputBase（sap.m.Input 的父 class）的 init 设置了 valuestate 初始值和渲染，因此它丢失了所有代码并且无法像您一样正常工作'找到了。

根据您的代码查看此示例：

sap.ui.define([
    "sap/m/Input"
], function (Control) {
    "use strict";
  
    return Control.extend("sample.control.NumericInput", {
        metadata: {
            properties: {},
            aggregations: {},
            events: {}
        },
        init: function () {
            Control.prototype.init.apply(this, arguments);
            this.attachLiveChange(this.onLiveChange);
        },
        renderer: function (oRM, oControl) {
            sap.m.InputRenderer.render(oRM, oControl);
        },
        onLiveChange: function (e) {
            var _oInput = e.getSource();
            var val = _oInput.getValue();
            val = val.replace(/[^\d]/g, "");
            _oInput.setValue(val);
        }
    });
});


// Small model
const model = new sap.ui.model.json.JSONModel({
  MyNumber: "10000000000000000000",
});

// Create an example of the control (JS not XML but idea is the same)
const input = new sample.control.NumericInput({
  valueState: "Error",
  valueStateText:"My Number must not be empty. Maximum 10 characters.",
  value: {
    path:'/MyNumber',
    type:'sap.ui.model.type.String',
    constraints:{minLength:1,maxLength:10}
  }
});

input.setModel(model);
input.placeAt('content');

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script 
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap" 
            data-sap-ui-theme="sap_fiori_3" 
            data-sap-ui-xx-bindingSyntax="complex" 
            data-sap-ui-libs="sap.m"></script>
  </head>
  <body class="sapUiBody sapUiSizeCompact">
    <div id='content'></div>
  </body>
</html>

Answer 2

你可以大大减少你的代码

  Input.extend('NumericInput', {
    renderer: {
    },
    onAfterRendering: function () {
      if (Input.prototype.onAfterRendering) {
        Input.prototype.onAfterRendering.apply(this, arguments);
      }
      this.$().find("INPUT").each(function(i, input) {
        $(input).on("keypress keyup blur", function(event) {
            $(this).val($(this).val().replace(/[^\d].+/, ""));
            if ((event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }
         });
      });
    },
  });

https://jsbin.com/muberid/1/edit?js,output

未为 SAPUI5 自定义控件定义 valueStateText

valueStateText not defined for SAPUI5 custom control

javascript

sapui5