Submiting form by means of external button but validation doesn't work

[Erciyes]

I am using blazor SFDataForm in SFDialog component.

I need to submit the form using a DialogButton which is not FormButton as you guess.

For this I am using EditContext of the form, validating it in button click event

But in this case FormValidator does not get triggered.

Though I am able to validate the form.

 <SfDataForm ID="rollForm"

             @ref="dataForm"

             Model="@RollData"

             ColumnCount=1

             ColumnSpacing="10px"

             LabelPosition="FormLabelPosition.Top"

             EditContext="@editContext">

     <FormValidator>

         <DataAnnotationsValidator></DataAnnotationsValidator>

     </FormValidator>

     <FormItems>

 ...

 ...

 </FormItems>

    <FormButtons>

        <!-- I don't want to use form buttons-->

    </FormButtons>

</SfDataForm>

...

<DialogButtons>

<DialogButton Content="Save" CssClass="e-success" OnClick="@OnSave" IsFlat="false />

...

....

</DialogButtons>

</SfDialog>

@code {

...

 public RollDataDTO? RollData { get; set; }

 private EditContext? editContext { get; set; }

...

 protected override Task OnInitializedAsync()

 {

     editContext = new EditContext(new RollDataDTO());

     return base.OnInitializedAsync();

 }

private async Task OnSave()

{

    var valid = editContext.Validate();

    if (valid)

    {

        await OnSaveCallback.InvokeAsync(RollData);

        this.IsVisible = false;

    }

    else

    {

        Console.WriteLine("Form validation failed.");

    }

}

}

[Yaswin Vikhaash Rajaretenam]

Hi Erciyes,

We have reviewed your query and would like to inform you that in the DialogButtons tag, you are directly invoking the Save event for form validation. Instead of this approach, we recommend using the DataForm instance and calling the IsValid method. This will ensure proper form validation before proceeding further.

Please find the code reference sample and video demonstration attached for your reference.

Code:

 

<DialogButtons>

 

        <DialogButton Content="Save" CssClass="e-success" OnClick="ClickHandler" />

 

</DialogButtons>

 

 

Code {

    SfDataForm DataFormInstance { get; set; }

 

    public void ClickHandler()

    {

        // Manually validate the form when the button is clicked

        DataFormInstance?.IsValid();

    }

}

Video Reference:

Regards,

Yaswin Vikhaash

Attachment: Dialog_with_DataFrom_ab18937b.zip