How to bind to SfTextBox in a child component?

Question

I'm sure what I want to do is possible, and it's probably not even hard, but I can't figure it out...I have a lot of text boxes that all look like this:

To simplify my code, reduce the bulk, and ensure consistency, I'd like to move that into a component, so that (in the parent) I could do something like: Using a (child) component that looks something like:

@code { [Parameter] public string cssClass { get; set; } = String.Empty; [Parameter] public string Placeholder { get; set; } = "Enter Text"; [Parameter] public string thisObject { get; set; } }However, I'm not getting the binding right. :( (I've tried a few combinations of where to put quotes and @-symbols.)Can someone help point me in the right direction?Thank you.

Sevvandhi Nagulan · Accepted Answer

Hi Byron, We checked your query. We suggest that you to validate the edit form in the child component. Kindly refer the following code. [Index.razor] @code { public class Object { [Required] public string surname { get; set; } } public Object objNewPerson = new Object(); } Please find the sample below. Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox-1818770904 Please check the above sample and get back to us if you need further assistance. Regards, Sevvandhi N

Sevvandhi Nagulan · Answer

Hi Byron, Greetings from Syncfusion support. We checked your query. Using the ValueChange event, we need to pass data from the parent component to the child component in order to get the current value in the child component. Please see the code below for passing data to the child component. [Parent component]

@code { [Parameter] public string cssClass { get; set; } = String.Empty; [Parameter] public string Placeholder { get; set; } = "Enter Text"; [Parameter] public string thisObject { get; set; } [Parameter] public EventCallback thisObjectChanged { get; set; } private void OnValueChanged(ChangedEventArgs e) { thisObject = e.Value.ToString(); thisObjectChanged.InvokeAsync(thisObject); } } [Child component] @code { public class Object { public string surname { get; set; } } public Object objNewPerson = new Object(); } Please find the sample below. Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox1504026842 Reference blog: https://www.c-sharpcorner.com/article/share-data-between-child-and-parent-components-in-blazor/ Please check the above sample and get back to us if you need further assistance. Regards, Sevvandhi N

Byron · Answer

That is awesome, thank you very much. The databinding works now, but...When I do it this way, I get the validation message:

But when I do it this way, the validation doesn't show it (the validation occurs, it shows in the summary, but the "validationMessage" doesn't show, and the sfTextbox doesn't pick up the red or green border. Would you have any suggestions about that?

@code { [Parameter] public string cssClass { get; set; } = String.Empty; [Parameter] public string Placeholder { get; set; } = "Enter Text"; [Parameter] public string thisObject { get; set; } = null!; [Parameter] public EventCallback thisObjectChanged { get; set; } private void OnValueChanged(ChangedEventArgs e) { thisObject = e.Value.ToString(); thisObjectChanged.InvokeAsync(thisObject); }}Thanks again