I'm having trouble entering decimal numbers in FluentNumberField when using EditForm.

[tomokusaba]

.NET 7 Blazor Wasm
Fluent UI Blazor 3.0.1

razor

<EditForm Model="@data" OnInvalidSubmit="OnInvalidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <FluentNumberField @bind-Value="data.Value1" Step="any" Name="Value1"/>
    <FluentNumberField @bind-Value="data.Value2" TValue="decimal" />
    <FluentNumberField @bind-Value="data.Value3" TValue="float" />
    <FluentNumberField @bind-Value="data.Value4" TValue="short" />
<FluentButton Type="ButtonType.Submit" >Submit </FluentButton>
</EditForm>

class

   public class NumberData
    {
        public double Value1 { get; set; }
        public decimal Value2 { get; set; }
        public float Value3 { get; set; }
        public short Value4 { get; set; }
    }

on submit button...

I'm experiencing an issue where an error message is displayed and the form is not being submitted when trying to enter decimal numbers in FluentNumberField. Could you please assist me with this problem?

[vnbaaij]

From the MDN docs:
Allowing decimal values

One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places).

But there is a catch. Number inputs are implemented notoriously bad by browser manufacturers. In most cases it will always insert a '.' as a separator for decimal numbers. If your locale uses a ',' (comma) as a separator, validation will fall also. All and all, I mostly advise to only use this input for simple whole number amounts.

[vnbaaij]

Please give me a link to the InputNumber issue and solution then

[tomokusaba]

InputNumber Source is https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputNumber.cs

<EditForm Model="@data" OnInvalidSubmit="OnInvalidSubmit" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    @*<FluentNumberField @bind-Value="data.Value1" TValue="double" Step=".1" Name="Value1"/>*@
    <InputNumber @bind-Value="data.Value1" TValue="double" />
    <FluentNumberField @bind-Value="data.Value2" TValue="decimal" Step="0.1" type="number" />
    <FluentNumberField @bind-Value="data.Value3" TValue="float" Step="any" />
    <FluentNumberField @bind-Value="data.Value4" TValue="short" Step="any" />
    <FluentTextField @bind-Value="data.Value5" />
<FluentButton Type="ButtonType.Submit" >Submit </FluentButton>
</EditForm>
@result

@code {
    NumberData data = new NumberData();
    string result = "";
    private void OnInvalidSubmit()
    {
        Console.WriteLine("Invalid Submit");
        result = "Invalid Submit";
    }

    private void OnValidSubmit()
    {
        Console.WriteLine("Valid Submit");
        result = "Valid Submit";
    }
}

InputNumber fill "0.1" → ValidSubmit

[tomokusaba]

The source code for all this can be found here
https://github.com/tomokusaba/FluentUI3Sample/blob/master/FluentUI3Sample/Pages/EditFormExap.razor

[vnbaaij]

I looked at this some more and the error is originating from the underlying web component (fluent-number-field). You can easily verify that in your source by replacing the first FluentNumberField with a fluent-number field. The problem will need to be solved there first, I'm afraid. Please create an issue in the FAST repo.

[tavanuka]

I am still facing the same issue when using the EditForm component and floating point values, stating that I need a whole number. Has it been updated yet?

[tomokusaba]

microsoft/fast#6617
Maybe it will be fixed if this issue is fixed

[vnbaaij]

Yes, that needs to be fixed first

[divieirasilva]

I'm facing this issue, it is not fixed yet?

[vnbaaij]

No it is not fixed. Search through the issues. There are a number of issues with the NumberField and they will most probably not get fixed in the underlying web component until next version. Advise is to not use this component.

[divieirasilva]

I see, and understand that

The main problem is that you can't bind-Value a decimal property to a FluentTextField (or am I missing something?).
My workarround was remove the form and all client data annotations validations (since I have server-side validations too)

Thanks for your answer.

[vnbaaij]

You can manually convert parse the value to/from string. Absolutely not ideal, I know but it is what it is for now.