Synchronize Input with Slider values independent from locales

问题

This is a follow-up question to How to bind integer Input value to Slider.

I have found out that the demo solution in this answer only works when there are integer values in the slider and the language of your browser is set to English.

Snippet from the demo:

<Input xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{FloatType: 'sap/ui/model/type/Float'}"
  type="Number"
  value="{
    path: '/value',
    type: 'FloatType'
  }"
/>

To reproduce the issue:

Go to the settings of your browser.
Set e.g. German as the language.
Reload the demo.

If the step of the slider is then set to an integer value (e.g. 1), values are all shown correctly in the input field.
With step="0.1", however, only integer values are shown whereas float values (e.g. "1,4") are hidden, causing warning in the browser console:

The specified value "1,4" cannot be parsed, or is out of range.

Any ideas or better solutions?

回答1:

In that case, remove type="Number" from the <Input> control.

The property type="Number" in UI5 shouldn't be used together with value-binding anyway, due to browsers implementing HTML <input type="number"> behavior slightly differently, according to the API reference:

Only the default value sap.m.InputType.Text may be used in combination with data model formats. (Source).

回答2:

Found a solution:

A formatter is needed that replaces the "," with a ".":

formatStringToNumber: sNumber => parseFloat(sNumber.replace(","))

In the binding of the input then simply add the formatter:

<Input 
  width= "50px" 
  type="Number"
  value="{
    path: '/passageWidth',
    formatter: 'formatStringToNumber',
    type: 'FloatType',
    formatOptions: { emptyString: 0 }
}"/>

来源：https://stackoverflow.com/questions/65583975/synchronize-input-with-slider-values-independent-from-locales

标签

sapui5