Blazor format an InputType of Numeric

Question

Would anyone know how to format a Numeric type to look like 100.10? Currently if the value is 100.10 it will display as 100.1

tried @bind-value:format with C2, 0:0.##, I'm new to Blazor so if anyone could point me in the right direction it would be appreciated.

<BSBasicInput InputType="InputType.Number" @bind-Value="@Amount" step="0.01" />

Peter Morris Peter Morris · Accepted Answer · 2020-05-28T20:46:18

If you bind to a decimal it seems it will keep the number of decimals you specify for the value, even training zeros.

@page "/"
<EditForm Model=@Account>
    <InputNumber @bind-Value=Account.Balance/>
    <button>Submit</button>
</EditForm>

@code
{
    BankAccount Account = new BankAccount();

    public class BankAccount
    {
        public decimal Balance { get; set; } = 23.300;
    }
}

For floats and doubles I would have expected the following to work

<InputNumber @bind-Value=Account.Balance @bind-Value:format="F2"/>

But it seems only DateTime and DateTimeOffset are supported, which is a shame.

There is an example on Blazor University showing how to descend from InputBase to create your own input controls. It would be quite trivial to implement a control that honours the format.

https://blazor-university.com/forms/descending-from-inputbase/

Blazor format an InputType of Numeric

1 Answers