场景:我有两个输入字段。其中一个将接受用户将决定的表单输入。另一个字段应与第一个字段中定义的格式匹配。例如,如果用户在第一个字段中输入 anan-xxx
等格式..:
b1c1-!*>
。 1b1c->!*
,因为第一个字符应该是字母而不是数字。因此,第一个字段将定义 a
(字母表), n
(数字),占位符和<的格式定义em> x
(任何字符)。
在UI5中执行此操作的简便方法是什么?我读了一些与掩码输入相关的内容,但我不知道如何实现它。
答案 0 :(得分:0)
正如您已经猜到的,控件sap.m.MaskInput可以用于此类用例。
这是一个演示:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
definition: `<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:form="sap.ui.layout.form"
xmlns="sap.m"
height="100%"
>
<App>
<form:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
>
<Label text="Mask"/>
<Input
value="{
path: '/maskValue',
type: 'sap.ui.model.type.String',
constraints: {
search: '^$|^[-9ax]+$'
}
}"
placeholder="Example: a9a9-xxx (case sensitive)"
required="true"
/>
<Label
text="Masked Input"
displayOnly="{= !%{/maskValue}}"
/>
<MaskInput
mask="{/maskValue}"
editable="{= !!%{/maskValue}}"
>
<rules>
<MaskInputRule
maskFormatSymbol="x"
regex="[^_]"
/>
</rules>
</MaskInput>
</form:SimpleForm>
</App>
</mvc:View>`,
models: {
undefined: new JSONModel(),
},
}).then(view => {
const msgMgr = sap.ui.getCore().getMessageManager();
msgMgr.registerObject(view.placeAt("content"), true);
})));
<script>
window["sap-ui-config"] = {
libs: "sap.ui.core, sap.m, sap.ui.layout",
preload: "async",
theme: "sap_belize",
compatVersion: "edge",
async: true,
"xx-waitForTheme": true,
"xx-xml-processing": "sequential",
"xx-async": true,
};
</script>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
MaskInput有一个名为<rules>
的聚合,等待 n - MaskInputRules。
"9"
/[0-9]/
"a"
/[a-zA-Z]/
"x"
)之外的任何字符添加了附加规则:_
。相应的正则表达式为/[^_]/
。如需进一步参考,请查看"Writing a regular expression pattern"。
或者,只有当第一个输入已成功将其值传递给模型时,才可以在第二个输入中应用蒙版。为此,您可以通过字符串type使用search
约束正则表达式^$|^[-9ax]+$
验证条目,该条件允许..:
^$
:空字符串|
:或^[-9ax]+$
:从头开始(^
)到结束(+$
),仅-
,9
,a
或x
。最后,让框架处理UI Messages和ValueState,以便向用户显示任何无效输入。