Using SF Controls with Blazor Form Validation

[Anthony]

Is it possible to use SyncFusion controls inside an EditForm? I want consistency in how my application looks.

[Sevvandhi Nagulan]

Hi Anthony, 

Greetings from Syncfusion support. 

Yes, we can use the Syncfusion controls inside editform. Please find the below code snippet and sample for your reference. 

 

    <EditForm Model="@exampleModel"> 

        <DataAnnotationsValidator /> 

        <SfTextBox @bind-Value="exampleModel.textVal"></SfTextBox> 

        <ValidationMessage For="@(() => exampleModel.textVal)" /> 

        <SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="Select a game" @bind-Value="exampleModel.Name" DataSource="@Games"> 

            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 

        </SfDropDownList> 

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

        <button type="submit">Submit</button> 

    </EditForm> 

Please find the sample below, 

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

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Jeffrey]

Can an <SfButton> be used in place of <button>?

[UdhayaKumar Duraisamy]

Yes, you can use the Syncfusion button component instead of native buttons to validate the form. For more information, please see the documentation linked below.

Documentation : https://blazor.syncfusion.com/documentation/common/input-validation#sftextbox