I discovered creating a decimal input component was more complicated than I originally thought. The complexity came when I decided it would be good to show formatted values. Specifically displaying currency with a currency symbol and parentheses (to denote negative values) as well as showing the percent symbol with percentages.
Showing formatted values is not possible inside of the html input element when the type is set to number. The only way I could find to show formatted values was to set the input type to string and handle the conversion of the string to a decimal in code. This involved trimming away the special characters [ $, (, ), % ] then using the Decimal.Parse method to convert the string to a decimal and storing the decimal value in the Value parameter.
It seems a bit messy to me but it appears to work well and it’s all wrapped up inside the component so you, my dear reader, do not have to deal with it. You just need to specify the format via the component’s string type Format parameter using the Microsoft standard numeric format strings,.For example “C2” for the currency format with two decimal places, “E3” for the exponential format with three decimal places, or “P2” for the percentage format with two decimal places.
