Custom Input Components Validation Styling Issue

[Kadir Boylu]

Hello,

In our project, we are using the Syncfusion Data Form component along with various Syncfusion input components for forms. To avoid code repetition, we have created custom components for some inputs. However, we are encountering an issue with this approach.

When a form is submitted, and an input value is invalid, we expect the input's border color to turn red. While this behavior works correctly for standard components, it does not work for custom input components.

Playground URL:
https://blazorplayground.syncfusion.com/hZBSjWrWBGBpsczb

The form contains two inputs:

• BasicCustomInput (uses SfTextBox)
• SfDatePicker

While the SfDatePicker behaves as expected, the custom input component does not seem to have e-error or invalid classes applied.

Could you please assist us in resolving this issue?

Thank you!

[Priyanka Karthikeyan]

Hi Kadir Boylu,

 

We appreciate you reaching out to us, and we're here to assist you with implementing the error class correctly on your custom textbox component. To achieve this, it's important to ensure that the ValueExpression is configured appropriately for the textbox. Below, we've provided a code snippet and sample to guide you:

 

​<SfTextBox Value="@ValueInternal" 
           ValueChanged="OnValueChange" 
           ValueExpression="@ValueExpression"
           Placeholder="@Placeholder"
           FloatLabelType="FloatLabelType.Auto"
           CssClass="conversion" />    

@code
{
    [Parameter]
    public Expression<Func<string>> ValueExpression { get; set; }
}

Sample: https://blazorplayground.syncfusion.com/VjVStiBgJBTtgidJ

 

Additionally, for more comprehensive guidance, please refer to our documentation: https://blazor.syncfusion.com/documentation/textbox/how-to/create-custom-component-with-validation

 

Regards,

Priyanka K