Viewmodel validation with pre existing values

[Erling K Saeterdal]

In some of of my pages my viewmodels will already have values, so i would like the validation to run on page init, and correctly color the controls.

I need to be able to do this on most of the components.

See attached example (test.razor)

Attachment: Validation_558ba4d.zip

[Berly Christopher]

Hi Erling K Saeterdal, 

  

Greetings from Syncfusion support. 

  

We will check and update the details in two business days (16^th December 2021). We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Erling K Saeterdal, 

  

We need more clarification about the reported issue before proceeding the request. So, please share the faced issue details with the Syncfusion component elaborately with any video demonstration which help us to check and proceed further from our end. 

  

Regards, 

Berly B.C 

[Erling K Saeterdal]

Open: http://localhost:44734/test


Notice for some reason the bottom component is instantly validating the user input, but none of the other component do.

If you input the same value in the 2 other components they will also validate and show green circle.

The SfTextBox has ValidateOnInput, but does not show as valid.

SfDateTimePicker has ValidateOnInput , and instantly shows valid status.

I would like all input/dropdown components to behave the same, idealy all components should have ValidateOnInput and behave the same.

[Berly Christopher]

Hi Erling, 

  

We will validate and update the further details in two business days (22^nd December 2021). We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Erling, 

  

We would like to inform you that if you are rendering any form components inside EditForm, the green and red color border based on validation will be added after you are entering or modifying the value in it. This is the standard behavior of the form components inside edit form.  

  

For the DateTimePicker component, while setting the Min and Value property as DateTime.Now, then the validation will be done based on milli second variations. Due to this, the DateTimePicker component will be rendered as green color border. So, we suggest you to set the static value for Min and Value property to render the component with standard behavior.  

  

   <SfDateTimePicker TValue="DateTime" StrictMode=true ValidateOnInput=true  @bind-Value="@_viewModel.Date" Min="@min" ShowTodayButton=true ShowClearButton=true FloatLabelType="FloatLabelType.Auto"> </SfDateTimePicker> 

            <ValidationMessage For="@(() => _viewModel.Date)" /> 

protected override async Task OnInitializedAsync() 

    { 

        GenerateFakeData(); 

        _viewModel = new ViewModelValdiation(); 

        _viewModel.Text = "Test"; 

        _viewModel.DropdownSelected = _fakeDataList.FirstOrDefault().ID; 

        _viewModel.Date =  new DateTime(2021, 12, 04); 

    } 

    public DateTime min { get; set; } = new DateTime(2021, 12, 04); 

 

  

Regards, 

Berly B.C 

[Erling K Saeterdal]

How do i override this standard behavior?

Is there realy no way to force a validation?

[Berly Christopher]

Hi Erling K Saeterdal, 

  

We can achieve the requested requirement by adding the CssClass manually by validating the controls with help of EditContext as mentioned below. 

  

<EditForm EditContext="@editContext"> 

    <DataAnnotationsValidator /> 

    <div class="row d-flex justify-content-center"> 

        <div class="col-md-8"> 

            <SfTextBox CssClass="@cssClass1" Multiline="true" ValidateOnInput=true FloatLabelType="@FloatLabelType.Auto" @bind-Value="_viewModel.Text"></SfTextBox> 

                <ValidationMessage For="@(() => _viewModel.Text)" /> 

        </div> 

    </div>     

    <div class="row d-flex justify-content-center"> 

        <div class="col-md-8"> 

            <SfDropDownList TItem="DropdownItems"  CssClass="@cssClass2" TValue="Guid" AllowFiltering="true" IgnoreCase="true" EnableVirtualization="true" PopupHeight="230px"  @bind-Value="@_viewModel.DropdownSelected" DataSource="@_fakeDataList" FloatLabelType="FloatLabelType.Auto"> 

                <DropDownListFieldSettings Text="Name" Value="ID"></DropDownListFieldSettings> 

            </SfDropDownList> 

            <ValidationMessage For="@(() => _viewModel.DropdownSelected)" /> 

        </div> 

    </div> 

    <div class="row d-flex justify-content-center"> 

        <div class="col-md-8"> 

            <SfDateTimePicker TValue="DateTime" StrictMode=true CssClass="@cssClass3" ValidateOnInput=true  @bind-Value="@_viewModel.Date" Min="@min" ShowTodayButton=true ShowClearButton=true FloatLabelType="FloatLabelType.Auto"> </SfDateTimePicker> 

            <ValidationMessage For="@(() => _viewModel.Date)" /> 

        </div> 

    </div> 

</EditForm> 

@code { 

    public string cssClass1 { get; set; } = "e-outline e-custom"; 

    public string cssClass2 { get; set; } = "e-custom1"; 

    public string cssClass3 { get; set; } = "e-custom2"; 

    private ViewModelValdiation _viewModel; 

    private EditContext editContext; 

   protected override async Task OnInitializedAsync() 

    { 

        _viewModel = new ViewModelValdiation(); 

        editContext = new EditContext(_viewModel); 

        GenerateFakeData(); 

        _viewModel.Text = "Test"; 

        _viewModel.DropdownSelected = _fakeDataList.FirstOrDefault().ID; 

        _viewModel.Date =  new DateTime(2021, 12, 04); 

        if (!editContext.Validate()) 

        { 

            cssClass1 = "e-error"; 

            cssClass2 = "e-error"; 

            cssClass3 = "e-error"; 

        } 

        else 

        { 

            cssClass1 = "e-success"; 

            cssClass2 = "e-success"; 

            cssClass3 = "e-success"; 

        } 

        StateHasChanged(); 

 

    } 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Validation_Edit_Context_171149-703519104  

  

Regards, 

Berly B.C