The Validation message in the InputNumber didnt work correctly

[zoha-shobbar]

i want to show you that by example. here my code

i have a required error message for Age property, but i get this message that i dont want it

i didn't find any documentation that can help me to fix it. also, its will be good idea if showing the error icon in the input be optional, some times we dont need it.

this is only thing that make me and my team to stop using your grate component

[hakenr]

HxInputNumber displays a ParsingErrorMessage because an empty value is not valid for the decimal data type. The DataAnnotationsValidator operates on the form's model and cannot distinguish if the public decimal Price { get; set; } property is empty, as default(decimal) defaults to 0.0m, which is a valid value.

To accommodate empty values in the form, use decimal? and validate them using the [Required] attribute.

I will just verify if this behavior aligns with the built-in InputNumber component in Blazor.

[zoha-shobbar]

thank you for you response, will you please make using the error icon be optional in input text and number?

[hakenr]

Confirmed, plain built-in InputNumber behaves the same:

@page "/"
@using System.ComponentModel.DataAnnotations

<EditForm EditContext="@editContext">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText @bind-Value="@model.Text" />
    <InputNumber @bind-Value="@model.Price" ParsingErrorMessage="Parsing failed!" />

    <input type="submit" value="Submit" />
</EditForm>

@code {
    private DemoModel model = new();

    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(model);
    }

    protected class DemoModel
    {
        [Required(ErrorMessage = "A text has to be written.")]
        public string Text { get; set; }

        [Required(ErrorMessage = "Write a correct value")]
        public decimal Price { get; set; }
    }
}

[hakenr]

will you please make using the error icon be optional in input text and number?

We simply decorate the input with the .is-invalid CSS class, and the icon is provided by Bootstrap's default definition for that class. You can override the CSS as needed.