Unable to bind to properties in complex object

[Ty Cia]

Hi,

I am using your Data Form Blazor component to bind to some data in both the model object and a nested object inside the model object. The data in the model object binds just fine, however, I cannot get the data in the nested object to bind and I'm seeing some strange behavior.

Some of the properties in the nested object have the same name as the properties in the model object. When I try to bind to the properties in the nested object, the data fields are bound to the properties in the model object that share a name. When I try to bind to a property in the nested object that doesn't have a property in the model object with the same name I get an error.

This looks to me like the same issue reported here which was stated as not fixed by the poster of that post and I am now seeing the same behavior: https://www.syncfusion.com/forums/186741/problem-when-binding-to-a-property-of-a-child-object-or-to-a-variable

I am using version 27.1.56

Thank you

This code does not produce an error, however, the data bound to the "Emergency Contact Information" section is actually the data belonging to properties in the Model object with the same name.

<SfDataForm ID="AccountInfoForm" Model="@Model" OnValidSubmit="HandleDataSubmit">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormGroup LabelText="Your Information">
            <FormItem Field="@nameof(Model.FirstName)" LabelText="First Name"/>
            <FormItem Field="@nameof(Model.LastName)" LabelText="Last Name"/>
            <FormItem Field="@nameof(Model.PhoneNumber)"/>
        </FormGroup>
        <FormGroup LabelText="Emergency Contact Information">
            <FormItem Field="@nameof(Model.EmergencyContact.FirstName)" LabelText="First Name"/>
            <FormItem Field="@nameof(Model.EmergencyContact.LastName)" LabelText="Last Name"/>
            <FormItem Field="@nameof(Model.EmergencyContact.PhoneNumber)" LabelText="Phone Number"/>
            <FormItem Field="@nameof(Model.EmergencyContact.Email)" LabelText="Email"/>
        </FormGroup>
    </FormItems>
</SfDataForm>

This code does produce an error, the only difference is that I am trying to bind to a property called Test which does exist inside the EmergencyContact object but not inside the Model object.

<SfDataForm ID="AccountInfoForm" Model="@Model" OnValidSubmit="HandleDataSubmit">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormGroup LabelText="Your Information">
            <FormItem Field="@nameof(Model.FirstName)" LabelText="First Name"/>
            <FormItem Field="@nameof(Model.LastName)" LabelText="Last Name"/>
            <FormItem Field="@nameof(Model.PhoneNumber)"/>
        </FormGroup>
        <FormGroup LabelText="Emergency Contact Information">
            <FormItem Field="@nameof(Model.EmergencyContact.FirstName)" LabelText="First Name"/>
            <FormItem Field="@nameof(Model.EmergencyContact.LastName)" LabelText="Last Name"/>
            <FormItem Field="@nameof(Model.EmergencyContact.PhoneNumber)" LabelText="Phone Number"/>
            <FormItem Field="@nameof(Model.EmergencyContact.Email)" LabelText="Email"/>
            <FormItem Field="@nameof(Model.EmergencyContact.Test)" LabelText="Test"/>
        </FormGroup>
    </FormItems>
</SfDataForm>

The error when binding to data without a shared name:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Value cannot be null. (Parameter 'obj') System.ArgumentNullException: Value cannot be null. (Parameter 'obj') at System.ArgumentNullException.Throw(String paramName) at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName) at System.Reflection.CustomAttribute.GetCustomAttributes(ICustomAttributeProvider obj, Type attributeType, Boolean inherit) at System.Attribute.GetAttr(ICustomAttributeProvider element, Type attributeType, Boolean inherit) at System.Attribute.GetCustomAttribute(MemberInfo element, Type attributeType) at System.Reflection.CustomAttributeExtensions.GetCustomAttribute(MemberInfo element, Type attributeType) at System.Reflection.CustomAttributeExtensions.GetCustomAttribute[DataFormDisplayOptionsAttribute](MemberInfo element) at Syncfusion.Blazor.DataForm.FormItems.<BuildRenderTree>b__39_3(RenderTreeBuilder __builder5) at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment) at Microsoft.AspNetCore.Components.CascadingValue`1[[Syncfusion.Blazor.DataForm.FormItems, Syncfusion.Blazor, Version=27.1.56.0, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89]].Render(RenderTreeBuilder builder) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

[Priyanka Karthikeyan]

Hi Ty Cia,

We sincerely apologize for the delay in our response. Based on the shared code snippet, we have created a sample using the DataForm component. However, we have encountered the following issue during our testing.

For your reference, please find the sample and a corresponding screenshot below:

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

To assist you more effectively, could you please provide the following details?

1. Are you experiencing the same issue on your end?
2. If you are encountering a different issue, could you kindly share a reproducible sample demonstrating the problem?
3. The exact steps to replicate the issue.

Your assistance will help us analyze and provide an appropriate solution at the earliest. We appreciate your patience and look forward to your response.

Regards,

Priyanka K

[Ty Cia]

Hi,

I tested your Blazor playground example and I am experiencing the same error as in the image you posted. If I remove the <FormValidator> then the issue goes away but the DataForm does not display. Either way, that error you posted is not the error I am having in my local environment.

When I copy the page from the Blazor playground into my local environment the issue that I described in my original post does appear. Whenever I try to display fields for properties whose names are unique to the nested object I get the "Value cannot be null" error. When I only display properties whose names are shared between the nested and parent model object the data for the nested object's properties are bound to the data for the properties in the parent model objects whose names are the same. Thus, if I run the code in your Blazor playground as is in my local environment I get the error, then if I remove the "Test" and "Email" fields from the nested object section the incorrect data binding can be observed.

The Blazor playground example that you sent is reproducing the issue for me, just not in the Blazor playground environment.

Thank you

[Priyanka Karthikeyan]

Hi Ty Cia,

 

Thank you for your patience.

 

In the DataForm component, you can directly use the property name instead of employing the @nameof operator, which is causing the issue. Here’s an example of how you can achieve this:

 

 

<SfDataForm ID="AccountInfoForm" Model="Model" OnValidSubmit="HandleDataSubmit">

 

    <FormValidator>

 

        <ObjectGraphDataAnnotationsValidator></ObjectGraphDataAnnotationsValidator>

 

    </FormValidator>

 

    <FormItems>

 

        <FormGroup LabelText="Your Information">

 

            <FormItem Field="@nameof(Model.FirstName)" LabelText="First Name"/>

 

            <FormItem Field="@nameof(Model.LastName)" LabelText="Last Name"/>

 

            <FormItem Field="@nameof(Model.PhoneNumber)" LabelText="Phone Number"/>

 

        </FormGroup>

 

        <FormGroup LabelText="Emergency Contact Information">

 

            <FormItem Field="EmergencyContact.FirstName" LabelText="First Name"/>

 

            <FormItem Field="EmergencyContact.LastName" LabelText="Last Name"/>

 

            <FormItem Field="EmergencyContact.PhoneNumber" LabelText="Phone Number"/>

 

            <FormItem Field="EmergencyContact.Email" LabelText="Email"/>

 

            <FormItem Field="EmergencyContact.Test" LabelText="Test"/>

 

        </FormGroup>

 

    </FormItems>

 

</SfDataForm>

 

Additionally, for complex properties, it is essential to use the ObjectGraphDataAnnotationsValidator to ensure proper validation. For more details about the validator, please refer to the documentation below:

https://blazor.syncfusion.com/documentation/data-form/validation#complex-model-validation
 

Regards,

Priyanka K

Attachment: DataFormsample_f51ed9f5.zip