SfDataForm with FluentValidator and Custom Component

[Geoffrey]

Context: MAUI Hybrid Blazor Application

Component: SfDataForm

Version: 30.1.39 on .NET 8.0.18

Hi,

I'm using your SfDataForm component, in which a FormItem uses a template to display a component I created:

(Simplified Version)

<SfDataForm ID="FormDetailConfiguration"

            @ref="sfDataform"

            Model="@Configuration"

            ColumnCount=2

            ColumnSpacing="20px"

            ButtonsAlignment="FormButtonsAlignment.Stretch"

            @key="formKey">

    <FormValidator>

        <FluentValidationValidator Validator="@ConfigurationValidator" />

    </FormValidator>

    <FormItems>

<FormGroup LabelText="> Configuration de la sauvegarde">

    <FormItem Field="@nameof(Configuration.PathDBFolder)">

        <Template>

            <TextBoxPicker @bind-Value="@Configuration.PathDBFolder" />

        </Template>

    </FormItem>

</FormGroup>

    </FormItems>

    <FormButtons>

        <SfButton IsPrimary="true" OnClick="@OnUpdateConfiguration" Disabled="@(!IsModelValid)">Mettre à jour</SfButton>

    </FormButtons>

</SfDataForm>

I'm attaching the two files for my component and the validator class.

It's a simple SfTextBox to which I've added an icon to select the path of a folder or file.

I'm using FluentValidation to check the validity of my model, but since switching to Fluent, I'm getting an error:

On first display, everything works fine:

But when I change the value of one of my TextBoxPickers, I get an error:

On file App.g.i.cs

e.message = 

Cannot validate instances of type 'TextBoxPicker'. This validator can only validate instances of type 'Configuration'.

If I put a SfTextBox in place of my TextBoxPicker: no problem

Do you have any ideas?

Thank you.

Attachment: TextBoxPicker_5648b426.zip

[Priyanka Karthikeyan]

Hi Geoffrey,

Thank you for reaching out to us.

It appears that your custom TextBoxPicker component is not fully integrated with the FluentValidation framework within the SfDataForm. Specifically, the component is missing the ValueExpression parameter, which is essential for proper binding with the EditContext. Additionally, please ensure that you're using the Value property in combination with the ValueChanged event to enable two-way binding.

For guidance on how to properly create a custom TextBox component with validation support, please refer to the following documentation:

🔗 Create Custom TextBox Component with Validation

This should help you align your component with the expected validation behavior in the SfDataForm.

 

Regards,

Priyanka K

[Geoffrey]

Hi Priyanka,

It was so simple, I should have seen it...

Thanks for your help.

[Shereen Shajahan]

Hi Geoffrey

Please get back to us for assistance in the future.

Regards,

Shereen