Validation not triggered while setting value to bound model

[Art Vandelay]

The form validation does not seem to trigger as expected while setting the value on the bound property by code.

If I enter the value manually in the browser it works just fine, but setting createNutreintLogViewModel.Gram from code-behind does not update the validation and it will display with validation-error until I click into the field a number of times.

The NumericTextBox is setup as this

              <SfNumericTextBox @ref="NumericBoxGram" TValue="Decimal?" ID="GramInput" FloatLabelType="FloatLabelType.Always"
                                @bind-Value="@(createNutrientLogViewModel.Gram)"
                                Placeholder="Gram" ShowClearButton="true">
              </SfNumericTextBox>
              <ValidationMessage For="@(() => createNutrientLogViewModel.Gram )"></ValidationMessage>

The validation is done by FluentValidation

    public CreateNutrientLogViewModelValidator()
    {
      RuleFor(x => x.Gram).NotEmpty().WithMessage("Gram er påkrevd.");
      RuleFor(x => x.Gram).InclusiveBetween(0m, 9999.99m).WithMessage("Verdien må være mellom 0 og 9999,99.");


      RuleFor(x => x.NameForAutoComplete)
        .Must((model, _) => !string.IsNullOrWhiteSpace(model.NameForAutoComplete) || (model.IdForDropDown != null && model.IdForDropDown != Guid.Empty))
        .WithMessage("Matvare er påkrevd.");


      RuleFor(x => x.IdForDropDown)
        .Must((model, _) => (model.IdForDropDown != null && model.IdForDropDown != Guid.Empty) || !string.IsNullOrWhiteSpace(model.NameForAutoComplete))
        .WithMessage("Matvare er påkrevd.");


    }

In code-behind I set the value. I've also added StateHasChanged() but it has no effect on the validation.

            createNutrientLogViewModel.Gram = lastUsed.Gram;
            StateHasChanged();

As far as I can see there is no way for me to set the value on the NumericTextBox if I use the reference NumericBoxGram.

Is this a known issue? How to resolve

[Kokila Poovendran]

Hi Art Vandelay

After thorough investigation, we have confirmed that the validation message persists within the component even after a value is assigned programmatically. Similarly, the Blazor native InputText component also retains validation errors when values are set programmatically. It is crucial to note that although the 'ValidateOnInput' property is utilized for validating input as it is provided, it does not trigger validation upon dynamically updating the value. However, validation functions as expected upon clicking the submit button in all scenarios. Thanks for your understanding.

[Art Vandelay]

Thank you for your prompt answer, Kokila.

Do you have a suggestion on a workaround or another approach to the "multi-field" validation? It seems a bit confusing for the end-user when the validation error persists, and it's not intuitive that one still can push the submit button

[Kokila Poovendran]

Hi Art Vandelay,

Thank you for reaching out to us regarding the multi-field validation issue. We understand the importance of providing a seamless user experience, and we're here to help.

Based on your query, we've tailored a solution that should address your needs effectively. Below is the customized sample:

            <EditForm @ref="editForm" Model="@annotation" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">

                <DataAnnotationsValidator />

                <div>

                    <label class="example-label">Age</label>

                    <SfNumericTextBox @ref=TextBoxObj TValue="int?" Placeholder="Enter an age between 1 to 80" Min="@SetMin" @bind-Value="@annotation.Age"></SfNumericTextBox>

                    <ValidationMessage For="@(() => annotation.Age)" />

                </div>

                <div class="submit-btn">

                    <SfButton type="submit" IsPrimary="true">Submit</SfButton>

                </div>

            </EditForm>

      

    <SfButton OnClick="ClickHandler">Set Value</SfButton>

@code {

    SfNumericTextBox<int?> TextBoxObj;

    private int? SetMin { get; set; } = 0;

    private string Message = string.Empty;

    private Annotation annotation = new Annotation();

    private EditForm editForm;

    async void OnValidSubmit()

    {

        Message = "The form was submitted successfully!";

        await Task.Delay(2000);

        Message = string.Empty;

        annotation.Age = null;

        StateHasChanged();

    }

    private void OnInvalidSubmit()

    {

        Message = string.Empty;

    }

    public class Annotation

    {

        [Required(ErrorMessage = "The age field is required.")]

        [Range(1, 80, ErrorMessage = "The age should be between 1 and 80.")]

        public int? Age { get; set; }

    }

    private void ClickHandler()

    {

        annotation.Age = 10;

        editForm.EditContext.Validate();  

    }

}

You can find the interactive sample here:  https://blazorplayground.syncfusion.com/rtrzjSXBzQoQYsDh

In this solution, we've incorporated a programmatic approach to set the value and trigger the validation process. By calling the validate() method after setting the value, we ensure that the form undergoes validation again, providing a clearer indication to the end-user.

Please feel free to integrate these changes into your project, and let us know if you require further assistance or have any other questions.