在SAPUI5的Input控件中绑定约束

Question

我的休息服务向我展示了一组字段：每个字段都有一个 value 和一个属性列表：enabled、maxLength（如果是字符串）、minLength（如果是字符串），decimals（小数位数 - 如果是浮点数）。

在 OpenUi5 中我有：

value和enabled是Input控件的属性Link（好！！我可以绑定属性与模型包含的属性）
maxLength 和 decimals 是选项 String type and Float type (Link) 但我无法将选项与模型绑定 :-/
minLength 我找不到 property/option

我想将每个属性映射（绑定）到组件，以便库自动为我控制，而无需编写更多代码。

Answer 1

Input 控件有一个名为 maxLength 的属性。

所以我看到的唯一问题是绑定 minLength 和 decimals，这需要一点努力。

解决方案

通过扩展现有的 Input 创建您自己的输入控件控制.How to achieve it?

示例代码结构：

jQuery.sap.require("sap.m.Input");
jQuery.sap.declare("sap.m.ComplexInput");

sap.m.Input.extend("sap.m.ComplexInput", {
    metadata: {
        properties: {
            minLength: {
                type: "int"
            },
            decimals: {
                type: "int"
            },
            events: {
                //define your own events like checkMinLength,checkDecimals 
            }
        },
        onInit: function () {
            //on init do something
        },
        onAfterRendering: function () {
            //called after instance has been rendered (it's in the DOM)
        },
        _somePrivateMethod: function () {
            /*do someting...*/
        },

        somePublicMethod: function () {
            /*do someting...*/
        },
    }
});

sap.m.ComplexInput.prototype.exit = function () {
        /* release resources that are not released by the SAPUI5 framework */
        //do something
};

添加 CustomData 并在任何你想使用的地方使用。然后您可以在验证过程中或在 liveChange 左右访问自定义数据..

将其他属性绑定到 customData 的值

var input = new sap.m.Input({
    value: '{value}',
    enabled: '{enabled}',
    maxLength: '{maxLength}',
    customData: [
        new sap.ui.core.CustomData({
        key: 'minLength',
        value: '{minLength}'
        }),
        new sap.ui.core.CustomData({
            key: 'decimals ',
            value: '{decimals}'
        })
    ],
    change: function(oEvent) {
        var src = oEvent.getSource();
        var minLen = src.getCustomData()[0].getValue();
        var decimals = src.getCustomData()[1].getValue();
        if (src.getValue() && src.getValue().length > minLen) {
            src.setValueState('Success');
        } else {
            src.setValueState('Error');
        }
    }
});

在SAPUI5的Input控件中绑定约束

Bind constraints in Input control of SAPUI5

data-binding

sapui5

sap-fiori