Don't allow negative numbers in FormItem input field

[Wilbur Cocom]

I have a SfDataForm with a FromItem. I need to not allow the user to enter a negative number. I have tried to use min="0" but that makes an error happen on the page. I have not seen anything in the documentation showing how to do this. Maybe I missed it. Does any one have a solution to this?

<SfDataForm ID="MyForm1" Width="100%" Model="@modifyTool" ColumnCount="2" ColumnSpacing="20px" ValidationDisplayMode="FormValidationDisplay.Inline" OnUpdate="CalcDensityOnInput">

    <FormValidator>

        <DataAnnotationsValidator></DataAnnotationsValidator>

        <ValidationSummary></ValidationSummary>

    </FormValidator>

    <FormItems>

<FormItem Field="@nameof(modifyTool.CustomerNumber)" ColumnSpan="1"></FormItem>

    </FormItems>

    <FormButtons>

        <SfButton @onclick="ModifyRec" class="e-control e-btn e-lib col-md-2" typeof="submit">Update</SfButton>

    </FormButtons>

</SfDataForm>

[Saranya Dhayalan]

Hi Wilbur Cocom

If you want to prevent negative numbers in a Syncfusion Blazor DataForm, it's recommended to use data annotation attributes like [Range] in your model, as setting min="0" directly is not supported in the declarative FormItem syntax.

To achieve your requirement, you can either use validation through data annotations or render a NumericTextBox using the template support provided by DataForm. Within the NumericTextBox, you can explicitly set the Min and Max values as needed. Check the documentation link below

Templates in Blazor DataForm Component | Syncfusion

If you have a property like CustomerNumber, define it in your model with a [Range] attribute:

public class ModifyToolModel

{

    [Required(ErrorMessage = "Customer Number is required.")]

    [Range(0, int.MaxValue, ErrorMessage = "Customer Number cannot be negative.")]

    public int CustomerNumber { get; set; }

}

<SfDataForm ID="MyForm1"

            Width="100%"

            Model="@modifyTool"

            ColumnCount="2"

            ColumnSpacing="20px"

            ValidationDisplayMode="FormValidationDisplay.Inline"

            >

 

    <FormValidator>

        <DataAnnotationsValidator></DataAnnotationsValidator>

        <ValidationSummary></ValidationSummary>

    </FormValidator>

 

    <FormItems>

        <FormItem Field="@nameof(modifyTool.CustomerNumber)" ColumnSpan="1"></FormItem>

    </FormItems>

 

    <FormButtons>

        <SfButton  class="e-control e-btn e-lib col-md-2" typeof="submit">Update</SfButton>

    </FormButtons>

</SfDataForm>

 

Sample link - https://blazorplayground.syncfusion.com/embed/rXheDpsczRiJdLYU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,

Saranya D

[Wilbur Cocom]

Thanks for the help.

[Shereen Shajahan]

Hi Wilbur

Glad to know that the provided solution helped. Please get back to us for assistance in the future.

Regards,

Shereen