Validation of child component

[Jirí]

Hi,

I have created the child component with the textbox, but the validation inside the component does not work. Some time ago you anwered this question where you have move the ValidationMessage outside of component, but this solution doesn't work as I expected. The main issues are:

• missing client side validation (validation message shows only after submit the form)
• border color of the textbox doesn't correspond with validation state (validation error message shows together with green borders of the textbox) 

Is any way how to implement the native, full working, validation to the custom component?

My sample application included.

Attachment: BlazorAppTest1_810445be.zip

[Berly Christopher]

Hi Jirí, 

  

Greetings from Syncfusion support. 

  

We would like to inform you that, for custom component, two-way binding will update only the string values not as value expression. So, the validation fails in the TextBox component. To resolve this, we need to add ValueExpression in the child component also. Please find the Stack Overflow and GitHub links for your reference.  

  

GitHub Link        : https://github.com/dotnet/aspnetcore/issues/27770  

  

   

Stack Overflow   : https://stackoverflow.com/questions/64802265/border-color-not-changed-when-field-is-invalid  

   

[CustomTextBox.razor]  

@using System.Linq.Expressions; 

<SfTextBox @ref="textbox" Value="@Value" ValueChanged="ValueChanged" Input="@InputHandler" ValueExpression="@ValueExpression" FloatLabelType="@FloatLabelType.Always" Placeholder="Enter your name"></SfTextBox> 

 

 

 

@code 

{  

    SfTextBox textbox { get; set; } 

    private string _value { get; set; } 

    [Parameter] 

    public string ID { get; set; } 

    [Parameter] 

    public Expression<Func<string>> ValueExpression { get; set; } 

    [Parameter] 

    public string Value 

    { 

        get => _value; 

        set 

        { 

            if (!EqualityComparer<string>.Default.Equals(value, _value)) 

            { 

                _value = value; 

                ValueChanged.InvokeAsync(value); 

            } 

        } 

    } 

    [Parameter] 

    public EventCallback<string> ValueChanged { get; set; } 

    [Parameter] 

    public EventCallback<InputEventArgs> InputHandler { get; set; } 

 

} 

[Index.razor] 

 

<div class="content wrapper"> 

        <EditForm Model="@annotation"> 

            <DataAnnotationsValidator /> 

                <div class="textbox"> 

                    <label for="Name" style="padding: 20px 0 5px 0">Name (min 3):</label> 

                    <SfTextBox id='textbox' @bind-Value="@annotation.Name" Placeholder="Enter a Name"></SfTextBox> 

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

                </div> 

                <div class="textbox"> 

                    <label for="Name custom" style="padding: 20px 0 5px 0">Name custom (min 3):</label> 

                    <CustomTextbox @bind-Value="@annotation.NameCustom" /> 

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

                </div> 

            <div class="sfButton"> 

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

            </div> 

        </EditForm> 

 

</div> 

 

  

Also, if you installing the individual Syncfusion NuGet package(Syncfusion.Blazor.Inputs), we need to refer the below styles file to render Syncfusion component correctly. 

  

  <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> 

 

  

UG Link: https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019#using-syncfusion-blazor-individual-nuget-packages-new-standard  

  

We have modified the sample and attached it below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTest128507642  

  

Regards, 

Berly B.C 

[Jirí]

Hi,

thank you very much for provided example, it's working as I need.

It's possible to apply similar code for SfDropDownList? I tried it, but with no luck.

[Berly Christopher]

Hi Jirí, 

  

Thanks for the information. We have prepared the sample for achieving the form validation for child component by using the DropDownList component and attached it below. 

  

@using System.Linq.Expressions; 

@typeparam TVal; 

@typeparam TItemss; 

<SfDropDownList Value="@Value" ValueChanged="ValueChanged" @oninput="@InputHandler" ValueExpression="@ValueExpression" TValue="TVal" TItem="TItemss" ShowClearButton="true" Placeholder="e.g. Australia" DataSource="@Country"> 

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

</SfDropDownList> 

 

 

@code 

{ 

    [Parameter] 

    public List<TItemss> Country { get; set; } 

    SfTextBox textbox { get; set; } 

    private TVal _value { get; set; } 

    [Parameter] 

    public string ID { get; set; } 

    [Parameter] 

    public Expression<Func<TVal>> ValueExpression { get; set; } 

    [Parameter] 

    public TVal Value 

    { 

        get => _value; 

        set 

        { 

            if (!EqualityComparer<TVal>.Default.Equals(value, _value)) 

            { 

                _value = value; 

                ValueChanged.InvokeAsync(value); 

            } 

        } 

    } 

    [Parameter] 

    public EventCallback<TVal> ValueChanged { get; set; } 

    [Parameter] 

    public EventCallback<ChangeEventArgs> InputHandler { get; set; } 

 

} 

<CustomTextbox TVal="string" TItemss="Countries" Country="@Country" @bind-Value="@annotation.NameCustom"> 

            </CustomTextbox> 

 

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

 

  

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DropDown_Validation-1499186445  

  

Regards, 

Berly B.C 

[Alex Fornes]

Hi Berly, 

I appreciate your provided examples to this problem. I tried implementing this on a Syncfusion Blazor ComboBox, but it seems to not carry over the invalid validation to the child component to highlight the combobox red, though the validation message does appear below it. Was this changed in a recent update, or is there another solution necessary to carry EditForm validation into a custom child component containing a Syncfusion ComboBox component?

I can create a new thread if necessary, but I would be looking for a solution for this nonetheless.

[Priyanka Karthikeyan]

Hi Alex Fornes,

 

Thank you for the update.

 

We have prepared a sample demonstrating how to achieve form validation for a child component using the ComboBox component. The validation is working correctly in the latest version, and the red border is properly applied when the value is null. For your reference, please find the sample and a video illustration of the behavior below.

To assist you further, could you kindly share the following:

1. The issue-reproducing sample where the problem occurs.
2. A detailed list of steps to replicate the issue.

Providing these details will help us better understand the problem and enable us to offer you a prompt and accurate response.

 

Please feel free to reach out if you have any additional questions or concerns.

 

Regards,

Priyanka K

Attachment: BlazorAppTest1_f99d0ee9.zip