InputNumber formatting for decimal numbers

[vertonghenb]

InputNumber with formatting (double, decimal, float)

Summary of the changes
InputNumber with formatting as in 0.00 or #.00 etc.

Description

In <InputDate we can choose how to format the date using the types. e.g. mm/yyyy etc. With InputNumber this is not possible to format decimal numbers. This PR intends to format the InputNumber with floating point numbers.

Scope

The following are in scope:

• Types:
  • double
  • float
  • decimal
• Components:
  • InputNumber

API

<InputNumber @bind-Value="A" Format="0.00"/>

In this case the decimal will always have 2 trailing zero's.

<InputNumber @bind-Value="A" Format="0.0000"/>

In this case the decimal will always have 4 trailing zero's.

Other possible formats:

Input Value	Format String	Expected Output	Description
"1.1"	"0.0#"	"1.1"	Single decimal place with optional second
"1500"	"0.00"	"1500.00"	Force two decimal places
"1500"	"0.0000"	"1500.0000"	Force four decimal places
"1500"	"0.##"	"1500"	Remove unnecessary decimals
"0"	"0.00"	"0.00"	Zero with fixed decimals
"0"	"0.##"	"0"	Zero with optional decimals
"-1.1"	"0.0#"	"-1.1"	Negative number with one decimal place
"-1500"	"0.00"	"-1500.00"	Negative number with two fixed decimals
"1.999"	"0.0"	"2.0"	Rounding up
"1.111"	"0.0"	"1.1"	Rounding down
"1234567.89"	"N2"	"1,234,567.89"	Large number with thousands separator
"1234567.89"	"#,##0.00"	"1,234,567.89"	Explicit thousands separator format
"0.1234"	"0.00%"	"12.34%"	Percentage formatting
"0.12"	"00.00"	"00.12"	Fixed zero's with fixed decimals
"1234567.89"	"0.00"	"1234567.89"	Fixed two decimals

Notes:

• However it will work in the tests but the type="number" on the input might stop us from showing thousand separators. since 1.000,01 won't show in the type="number". I don't think we want to change the type to text since we might break existing usage.

Any idea's how to solve this problem are welcome. The other formats will work as expected.

Idea's

Haven't tested it but using inputmode and pattern might accomplish the same:

<input type="text" pattern="^[0-9․,]+$" inputmode="decimal"/>

Fixes #30567

[dotnet-policy-service]

Thanks for your PR, @vertonghenb. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[javiercn]

I don't think this works E2E given that https://github.com/dotnet/aspnetcore/pull/60112/files#diff-e63dfe1bc840c170976630c438fc566bcf463606ba3b6c14970d4eac0f898751R61 this is a type=number input.

[javiercn]

Looks like a good starting point, but it needs E2E tests. I'm not confident the format bit will work with InputNumber since it creates an underlying <input type="number" /> element, which I believe doesn't take any format as it's a number value in JS