[Input Mask Reactive] Creating decimal mask

Forge Component
Published on 8 May by Steven Decock
0 votes
Published on 8 May by Steven Decock


I have a question, what pattern should I use for creating a mask that will allow only numeric values and express them as a decimal number with 2 digits and a point "." as separator?


0 would be 0.00

12345 would be 12345.00

999.32222 would be 999.32




I think

Hi Detlev,

Actually, it doesn't work, it limits the number to have 4 digits only (including decimals), I think I have to find another approach since I've read this mask is useful for fixed size masks (like IBANS, Phone Numbers etc.), but thanks anyway.



For fixed length you yust use (p.e. IBAN)  "aa 99 aaaa 9999 9999 99". The problem arises when it's not a fixed length.



I just updated the component to include a new InputNumberMask component that you can use in this case (so not using a pattern).

I've included an example in the demo application that behaves the way you describe.

Essentially, you want to use the InputNumberMask with: 

  • Scale = 2
  • PadFractionalZeros = True
  • Radix = "."
  • MapToRadix = "["",""]"

The MapToRadix will make sure that if someone types ',', it changes it to '.' instead.

Hope this helps.