valueStateText не определен для настраиваемого элемента управления SAPUI5 - PullRequest
Новая
       28

valueStateText не определен для настраиваемого элемента управления SAPUI5

0 голосов
/ 17 июня 2020

У меня ниже настраиваемый элемент управления, созданный путем расширения 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."/>

enter image description here

Ответы [ 2 ]

1 голос
/ 18 июня 2020

В вашем init переопределении вам нужно вызвать init родительского элемента управления (не onInit из sap.ui.core.Control). init родительского класса sap.m.InputBase (sap.m.Input) устанавливает начальные значения и рендерингvalestate, поэтому весь этот код отсутствует и работает неправильно, как вы обнаружили.

Проверить из этого примера на основе вашего кода: 

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>
0 голосов
/ 18 июня 2020

вы можете значительно сократить свой код до 

  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, выведите

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...