Edit form in modal component

[curtic00]

is it possible to have a edit form in a modal component, inputs within the Body template, but submit and cancel buttons within the footer template. I have had a quick try, but the form does not show, only the header template.

TIA

[junkerderprovinz]

Yes, it works if the EditForm lives inside BodyTemplate and the footer button points at it with the HTML form attribute. Modal renders BodyTemplate and FooterTemplate into separate modal-body and modal-footer divs, so one EditForm can't wrap both, but a submit button with form="..." submits that form from outside it, and validation and OnValidSubmit run as usual:

<Modal @ref="modal" Title="Edit item">
    <BodyTemplate>
        <EditForm id="editItemForm" Model="item" OnValidSubmit="SaveAsync">
            <DataAnnotationsValidator />
            <InputText class="form-control" @bind-Value="item.Name" />
            <ValidationMessage For="() => item.Name" />
        </EditForm>
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="() => modal.HideAsync()">Cancel</Button>
        <Button Type="ButtonType.Submit" Color="ButtonColor.Primary" form="editItemForm">Save</Button>
    </FooterTemplate>
</Modal>

Button passes unknown attributes like form straight through to the <button> element, so you can keep using the library's button here.

[curtic00]

👍👍👍👍Many thanks. Charlie Charlie Curtis Worthing, West SussexBN133AB.MCSD, MCSA, MCRDBA, Azure administratorMobile: 0777 254 5516LinkedIn: https://uk.linkedin.com/in/charlieecharlieOn 16 Oct 2026, at 02:33, Junker der Provinz ***@***.***> wrote: Yes, it works if the EditForm lives inside BodyTemplate and the footer button points at it with the HTML form attribute. Modal renders BodyTemplate and FooterTemplate into separate modal-body and modal-footer divs, so one EditForm can't wrap both, but a submit button with form="..." submits that form from outside it, and validation and OnValidSubmit run as usual: <Modal @ref="modal" Title="Edit item"> <BodyTemplate> <EditForm id="editItemForm" Model="item" OnValidSubmit="SaveAsync"> <DataAnnotationsValidator /> <InputText class="form-control" @bind-Value="item.Name" /> <ValidationMessage For="() => item.Name" /> </EditForm> </BodyTemplate> <FooterTemplate> <Button Color="ButtonColor.Secondary" @OnClick="() => modal.HideAsync()">Cancel</Button> <Button Type="ButtonType.Submit" Color="ButtonColor.Primary" form="editItemForm">Save</Button> </FooterTemplate> </Modal> Button passes unknown attributes like form straight through to the <button> element, so you can keep using the library's button here. —Reply to this email directly, view it on GitHub, or unsubscribe.Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS and Android. Download it today! You are receiving this because you authored the thread.Message ID: ***@***.***>