Skip to content

FormatStrings not working with @bind-value:format for <InputNumber> in Blazor WebAssembly #30567

@fingers10

Description

Describe the bug

Display Formatting doesn't work with decimal types in Blazor WebAssembly.

To Reproduce

  1. Create a New Blazor Web Assembly App.
  2. Navigate to Index.razor
  3. Paste the below code.
<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputNumber id="name" @bind-Value="exampleModel.Price" @bind-Value:format="{0:#.##}" />

    <button type="submit">Submit</button>
</EditForm>

@code
{
    protected ExampleModel exampleModel = new ExampleModel
    {
        Price = 580.471m
    };

    protected void HandleValidSubmit()
    {
    }

    public class ExampleModel
    {
        //[DisplayFormat(DataFormatString = "{0:#.##}", ApplyFormatInEditMode = true)]
        public decimal Price { get; set; }
    }
}
  1. Notice the output as shown below:
    image

  2. @bind-value:format doesn't seem to work. I have also tried with [DisplayFormat(DataFormatString = "{0:#.##}", ApplyFormatInEditMode = true)] Data Annotation. This also doesn't work.

  3. Later from the docs I noticed that

Data binding works with DateTime format strings using @Bind:format. Other format expressions, such as currency or number formats, aren't available at this time.

Is there any plans on including this in preview release? Please can you share an update on this? Or is there any best workaround for this at the moment?

Further technical details

  • ASP.NET Core version - 5.0.3

  • Include the output of dotnet --info
    image

  • The IDE - VS 2019 16.8.6

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor ComponentsenhancementThis issue represents an ask for new feature or an enhancement to an existing onefeature-blazor-component-modelAny feature that affects the component model for Blazor (Parameters, Rendering, Lifecycle, etc)feature-renderingFeatures dealing with how blazor renders components

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions