我通过扩展 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."/>
2 回答
料青山看我应如是
TA贡献1772条经验 获得超8个赞
在您的init覆盖中，您需要调用init父控件的 （而不是 onInit sap.ui.core.Control）。(init的父sap.m.InputBase类sap.m.Input) 设置 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>
LEATH
TA贡献1936条经验 获得超6个赞
你可以大大减少你的代码
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,输出
添加回答
举报
0/150
提交
取消