How to use EditForms with Tabs

[Ashwin Mishra]

We're trying to utilize the SfTabs components for one of our feature request. The content of the tabs are interlinked and separated between 3 tabs. The request is to validate the content across all the tabs before we perform a submit on the final tab.

How did we approach this problem?

Currently, we are trying to wrap the whole tab within an EditForm. The model supplied to this EditForm contains all the input fields and various grid datasources that are present in all three tabs.

Every tab has the 'next ' button disabled programmatically so that all the required fields within the tab in view is filled. Once valid, the next button is enabled to load the next tab.

We have onValidSubmit hooked up to a method 'onSave'. The problem we are facing is that 'onSave' method is getting called everytime we hit the 'next' button.

Is our approach of utilizing EditForms with SfTabs wrong? 

Is there anything we can do to make this a better form? 

[Satheesh Kumar Balasubramanian]

Hi Ashwin, 

  

Thanks for using Syncfusion Products. 

  

Is our approach of utilizing EditForms with SfTabs wrong?" 

  

Actually we are sure because we suspect that you have used EditForm for whole SfTab. Could you please share more details how do you using the Editforms? 

  

Is there anything we can do to make this a better form?" 

  

Yes. We suggest you use EditForm for each tab item content to resolve this reported issue. 

Sample: https://www.syncfusion.com/downloads/support/forum/171389/ze/EditForm-1384573396 

  

Index.razor: 

<div class="control-section e-tab-section"> 

    <SfTab @ref="Tab" ID="BlazorTab" Height="390"> 

        <TabEvents Created="TabCreate"></TabEvents> 

        <TabItems> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="New Booking"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <EditForm Model="@Model" OnValidSubmit="@OnBookingSubmit"> 

                        <div id="booking"> 

                        </div> 

                    </EditForm> 

                </ContentTemplate> 

            </TabItem> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Train List"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <EditForm Model="@Model" OnValidSubmit="@OnListSubmit"> 

                        <div id="selectTrain"> 

                        </div> 

                    </EditForm> 

                </ContentTemplate> 

            </TabItem> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Add Passenger"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <EditForm Model="@Model" OnValidSubmit="@OnAddSubmit"> 

                        <div id="details"> 

                        </div> 

                    </EditForm> 

                </ContentTemplate> 

            </TabItem> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Make Payment"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <EditForm Model="@Model" OnValidSubmit="@OnPaymentSubmit"> 

                        <div id="confirm"> 

                        </div> 

                    </EditForm> 

                </ContentTemplate> 

            </TabItem> 

        </TabItems> 

    </SfTab> 

</div> 

  

@code{ 

    private async void OnBookingSubmit() 

    { 

        Console.WriteLine("New Booking"); 

    } 

    private async void OnListSubmit() 

    { 

        Console.WriteLine("Train List"); 

    } 

    private async void OnAddSubmit() 

    { 

        Console.WriteLine("Add Passenger"); 

    } 

    private async void OnPaymentSubmit() 

    { 

        Console.WriteLine("Payment"); 

    } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B