猿问

未为 SAPUI5 自定义控件定义 valueStateText

我通过扩展 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."/>

慕码人2483693
浏览 166回答 2
2回答

料青山看我应如是

在您的init覆盖中，您需要调用init父控件的 （而不是 onInit sap.ui.core.Control）。(init的父sap.m.InputBase类sap.m.Input) 设置 valuestate 初始值和渲染，因此它丢失了所有代码并且无法正常工作，就像您发现的那样。根据您的代码查看此示例：sap.ui.define([&nbsp; &nbsp; "sap/m/Input"], function (Control) {&nbsp; &nbsp; "use strict";&nbsp;&nbsp;&nbsp; &nbsp; return Control.extend("sample.control.NumericInput", {&nbsp; &nbsp; &nbsp; &nbsp; metadata: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; properties: {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aggregations: {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; events: {}&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; init: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Control.prototype.init.apply(this, arguments);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.attachLiveChange(this.onLiveChange);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; renderer: function (oRM, oControl) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sap.m.InputRenderer.render(oRM, oControl);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; onLiveChange: function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var _oInput = e.getSource();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = _oInput.getValue();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; val = val.replace(/[^\d]/g, "");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _oInput.setValue(val);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});// Small modelconst model = new sap.ui.model.json.JSONModel({&nbsp; MyNumber: "10000000000000000000",});// Create an example of the control (JS not XML but idea is the same)const input = new sample.control.NumericInput({&nbsp; valueState: "Error",&nbsp; valueStateText:"My Number must not be empty. Maximum 10 characters.",&nbsp; value: {&nbsp; &nbsp; path:'/MyNumber',&nbsp; &nbsp; type:'sap.ui.model.type.String',&nbsp; &nbsp; constraints:{minLength:1,maxLength:10}&nbsp; }});input.setModel(model);input.placeAt('content');<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <title>JS Bin</title>&nbsp; &nbsp; <script&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="sap-ui-bootstrap"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-sap-ui-theme="sap_fiori_3"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-sap-ui-xx-bindingSyntax="complex"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-sap-ui-libs="sap.m"></script>&nbsp; </head>&nbsp; <body class="sapUiBody sapUiSizeCompact">&nbsp; &nbsp; <div id='content'></div>&nbsp; </body></html>
0

LEATH

你可以大大减少你的代码&nbsp; Input.extend('NumericInput', {&nbsp; &nbsp; renderer: {&nbsp; &nbsp; },&nbsp; &nbsp; onAfterRendering: function () {&nbsp; &nbsp; &nbsp; if (Input.prototype.onAfterRendering) {&nbsp; &nbsp; &nbsp; &nbsp; Input.prototype.onAfterRendering.apply(this, arguments);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; this.$().find("INPUT").each(function(i, input) {&nbsp; &nbsp; &nbsp; &nbsp; $(input).on("keypress keyup blur", function(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).val($(this).val().replace(/[^\d].+/, ""));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ((event.which < 48 || event.which > 57)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; });https://jsbin.com/muberid/1/edit?js,输出
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答