Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
fingers10 opened this issue Mar 2, 2021 · 5 comments · May be fixed by #60112
Open

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

fingers10 opened this issue Mar 2, 2021 · 5 comments · May be fixed by #60112
Labels
area-blazor Includes: Blazor, Razor Components enhancement This issue represents an ask for new feature or an enhancement to an existing one feature-blazor-component-model Any feature that affects the component model for Blazor (Parameters, Rendering, Lifecycle, etc) feature-rendering Features dealing with how blazor renders components
Milestone
Backlog

Comments

@fingers10
Copy link

fingers10 commented Mar 2, 2021 •
edited
Loading

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
@javiercn javiercn added the area-blazor Includes: Blazor, Razor Components label Mar 2, 2021
@captainsafia captainsafia added the enhancement This issue represents an ask for new feature or an enhancement to an existing one label Mar 2, 2021
@captainsafia captainsafia added this to the Next sprint planning milestone Mar 2, 2021
@ghost
Copy link

ghost commented Mar 2, 2021

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

@javiercn javiercn added feature-blazor-component-model Any feature that affects the component model for Blazor (Parameters, Rendering, Lifecycle, etc) feature-rendering Features dealing with how blazor renders components labels Apr 20, 2021
@ghost
Copy link

ghost commented Jul 20, 2021

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

@TanayParikh
Copy link
Contributor

Hello @fingers10. As you mentioned from the docs:

Data binding works with a single DateTime format string using @Bind:format="{FORMAT STRING}", where the {FORMAT STRING} placeholder is the format string. Other format expressions, such as currency or number formats, aren't available at this time but might be added in a future release.

This is not currently planned, but we'll use this issue to track community interest for this feature.

@stewart-james
Copy link

My company is keen for bind format string support against numeric types, we currently have to do the formatting ourselves whenever we want specific precision on our floating point values. Being able to bind directly to the double with a format string would be great, especially since Blazor / the browser would then handle the localisation for us :)

@mkArtakMSFT mkArtakMSFT modified the milestones: Backlog, BlazorPlanning Nov 5, 2023
@mkArtakMSFT mkArtakMSFT modified the milestones: Planning: WebUI, Backlog Nov 20, 2023
@dotnet dotnet deleted a comment Nov 20, 2023
@harveytriana
Copy link

harveytriana commented Nov 12, 2024 •
edited
Loading

<input type="number" @bind-value="@Number" @bind-value:format="0.000000" />

Error (active) CS1503 Argument 1: cannot convert from 'double' to 'System.DateTime' ...

Very bad.

@vertonghenb vertonghenb linked a pull request Jan 30, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-blazor Includes: Blazor, Razor Components enhancement This issue represents an ask for new feature or an enhancement to an existing one feature-blazor-component-model Any feature that affects the component model for Blazor (Parameters, Rendering, Lifecycle, etc) feature-rendering Features dealing with how blazor renders components
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

InputNumber formatting for decimal numbers vertonghenb/aspnetcore
7 participants
@captainsafia @harveytriana @javiercn @TanayParikh @mkArtakMSFT @fingers10 @stewart-james