Event handlers in DataForm component

4 Nov 202511 minutes to read

This section describes the available DataForm events and when to use them. The form-level submit events mirror the Blazor EditForm pipeline, and a field-level update event helps react to per-field edits.

On submit event

The OnSubmit event is raised whenever the form is submitted, regardless of validation success or failure. Use this event to run logic that must occur on every submit (for example, logging or generic pre-processing). The callback receives the current EditContext in its event args. Handlers can be synchronous or async.

Model

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel"
            OnSubmit="SubmitHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public void SubmitHandler()
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

EditContext

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<SfDataForm Width="50%"
            EditContext="@RegistrationDetailsContext"
            OnSubmit="SubmitHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    EditContext RegistrationDetailsContext { get; set; }

    public void SubmitHandler(EditContext editContext)
    {
        bool isValid = editContext.Validate();

        if(isValid)
        {
            // Here you can handle logic when form submission is valid
        }
        else
        {
            // Here you can handle logic when form submission is invalid
        }
    }

    protected override void OnInitialized()
    {
        RegistrationDetailsContext = new EditContext(RegistrationDetailsModel);
        base.OnInitialized();
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

On valid submit event

The OnValidSubmit event is triggered when the form is submitted and all validation rules are satisfied. Use this event to persist data, call APIs, or navigate on success. The callback provides the current EditContext so the validated model can be accessed. Async handlers are supported.

OnValidSubmit is typically used to handle the form submission logic, such as saving the form data to a database, when the form data is valid.

Model

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel"
            OnValidSubmit="OnValidSubmitHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public void OnValidSubmitHandler()
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

EditContext

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            EditContext="@RegistrationDetailsContext"
            OnValidSubmit="OnValidSubmitHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    EditContext RegistrationDetailsContext { get; set; }

    protected override void OnInitialized()
    {
        RegistrationDetailsContext = new EditContext(RegistrationDetailsModel);
        base.OnInitialized();
    }

    public void OnValidSubmitHandler(EditContext editContext)
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

On invalid submit event

The OnInvalidSubmit event is triggered when the form is submitted and one or more validation rules fail. Use this event to show a message, focus the first invalid field, or log validation issues. The handler receives the current EditContext, which contains validation messages.

Model

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel"
            OnInvalidSubmit="OnInvalidSubmitHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public void OnInvalidSubmitHandler()
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

EditContext

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            EditContext="@RegistrationDetailsContext"
            OnInvalidSubmit="OnInvalidSubmitHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {


    EditContext RegistrationDetailsContext { get; set; }

    protected override void OnInitialized()
    {
        RegistrationDetailsContext = new EditContext(RegistrationDetailsModel);
        base.OnInitialized();
    }

    public void OnInvalidSubmitHandler(EditContext editContext)
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

On update event

The OnUpdate event is invoked when a field value changes in the DataForm. The event provides the changed field name and the updated model through FormUpdateEventArgs, enabling scenarios such as dependent field updates or incremental validation.

Model

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            Model="@RegistrationDetailsModel"
            OnUpdate="OnUpdateHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    public void OnUpdateHandler(FormUpdateEventArgs arguments)
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}

EditContext

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations


<SfDataForm Width="50%"
            EditContext="@RegistrationDetailsContext"
            OnUpdate="OnUpdateHandler">

    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>
        <FormAutoGenerateItems></FormAutoGenerateItems>
    </FormItems>

</SfDataForm>

@code {

    EditContext RegistrationDetailsContext { get; set; }

    protected override void OnInitialized()
    {
        RegistrationDetailsContext = new EditContext(RegistrationDetailsModel);
        base.OnInitialized();
    }

    public void OnUpdateHandler(FormUpdateEventArgs arguments)
    {
        // Here, you can include your required logic.
    }

    public class RegistrationDetails
    {

        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter valid email address")]
        public string Email { get; set; }
    }

    private RegistrationDetails RegistrationDetailsModel = new RegistrationDetails();
}