how-to(inputMask): use custom thousand and decimal separator

[ilmalte]

Hi there,

I'm implementing inputMask in a survey of an Angular web application.

I was wondering if is possible to use custom thousand and decimal separator.

Below you can see my element, it works correctly. { type: 'text', inputMask: 'currency', name: 'currency', title: 'Currency:' }

In the textbox it display a value formatted using comma as thousand separator (groupSeparator) and point as decimal separator (radixPoint): 5,555,555.20 but I would like something like this (point for thousands and comma for decimals): 5.555.555,20

Is it possible to define this in the element definition?

Thanks, Daniele

[HenriTroyot]

Hello Daniele,

We use a third-party library - Inputmask - to render our custom text question widget that uses input masks. We internally wrap the Inputmask functionality with our custom widget (see the inputmask.js file in our custom-widgets repo) and expose our own properties (such as inputMask or inputFormat) that internally define Inputmask settings. The demo of our Inputmask custom widget is available here: https://www.surveyjs.io/Examples/Library?id=custom-widget-inputmask

It seems that currently we don't expose our analogues for the Inputmask's groupSeparator and radixPoint settings. I'll discuss this issue with the team.

Thank you, Andy

[HenriTroyot]

Hello Daniele,

It appears that our code already has a setting that allows you to define a custom group separator. This is the numericGroupSeparator setting that is available in sources:
https://github.com/surveyjs/custom-widgets/blob/23fb85cbcd251a4e85cccd0cd938b97a8ef99f1e/src/inputmask.js#L6

Use the following approach to access and modify this setting:

Survey.CustomWidgetCollection.Instance.getCustomWidgetByName("maskedit").widgetJson.numericGroupSeparator = " ";

See the following planker sample for more details: https://plnkr.co/edit/BpZFDhkcrnPKa11i?preview

As for an ability to specify a custom radix point, we have just added its implementation (commit). The corresponding setting - numericRadixPoint - will be available in the next release.

Thank you for pointing our attention to this problem.

Regards, Andy