Form Submit and Validate with Button outside of RadzenTemplateForm

Radzen Blazor Studio
1

Hello,

I have a button outside the RadzenTemplateForm - how to Submit the form that also the Validate (RadzenRequiredValidator) works?

        <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="Radzen.ButtonType.Submit" Click="@FormSubmit" Icon="save" Text="Speichern" Style="margin-right: 0.5rem" Variant="Variant.Flat" />

or is it nesessary to place the "Submit" Button inside the RadzenTemplateForm?

regards

2

Hi @Mad.Rain,

There is a relatively unknown HTML attribute called form which allows buttons to submit a form they are not nested in. Try something like this:

<RadzenTemplateForm id="myForm" ...>
</RadzenTemplateForm>
<RadzenButton form="myForm"  ... />
4 Likes
3

This worked great until migrating to NET8 and updating Radzen to version 5.
RadzenButton calls Submit, but @bind-Value="dzial.Nazwa" assignment does not work.
After the dialog is finished, the value of dzial.Nazwa is unchanged.


<RadzenRow>
    <RadzenColumn Size="3">
        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Right" Gap="1rem" Style="margin-top: 0px; margin-bottom: 5px;">
            <RadzenButton form="formDzial" ButtonType="ButtonType.Submit" Size="ButtonSize.Small" Icon="check_circle" Text="Zapisz" />
        </RadzenStack>
    </RadzenColumn>
</RadzenRow>

<RadzenTemplateForm id="formDzial" Data="@dzial" Submit="@((Dzial args) => { Submit(args); })">
    <RadzenRow>
        <RadzenColumn Size="10">
            <RadzenStack AlignItems="AlignItems.Normal" Gap="1rem" Style="margin-top: 0px; width:auto">

                <RadzenFieldset AllowCollapse="true" CollapseTitle="Identyfikacja" ExpandTitle="Identyfikacja"
                                ExpandAriaLabel="" CollapseAriaLabel="" Style="margin-top: 0px; width: 100%">
                    <HeaderTemplate>
                        <RadzenLabel><b>Identyfikacja</b> </RadzenLabel>
                    </HeaderTemplate>
                    <ChildContent>
                        <RadzenStack AlignItems="AlignItems.Normal" Gap="1rem" Style="margin-top: 0px;">
                            <RadzenRow Gap="1rem">
                                <RadzenColumn Size="4">
                                    <RadzenFormField Text="Kod" Style="width: 100%;" Variant="Variant.Filled" AllowFloatingLabel="false">
                                        <RadzenTextBox Style="width: 100%;" MaxLength="15" Name="Kod" @bind-Value="dzial.Kod" />
                                    </RadzenFormField>
                                </RadzenColumn>
                            </RadzenRow>
                            <RadzenRow Gap="1rem">
                                <RadzenColumn Size="12">
                                    <RadzenFormField Text="Nazwa" Style="width: 100%;" Variant="Variant.Filled" AllowFloatingLabel="false">
                                        <RadzenTextBox Style="width: 100%;" MaxLength="120" Name="Nazwa" @bind-Value="dzial.Nazwa" />
                                    </RadzenFormField>
                                </RadzenColumn>
                            </RadzenRow>
                        </RadzenStack>
                    </ChildContent>
                    <SummaryTemplate>
                        <RadzenText>@dzial.Kod &nbsp; @dzial.Nazwa</RadzenText>
                    </SummaryTemplate>
                </RadzenFieldset>
            </RadzenStack>
        </RadzenColumn>
    </RadzenRow>
</RadzenTemplateForm>

After moving RadzenButton to RadzenTemplateForm and removing form="formDzial", @bind-Value="dzial.Nazwa" assignment works.

<RadzenTemplateForm id="formDzial" Data="@dzial" Submit="@((Dzial args) => { Submit(args); })">

    <RadzenRow>
        <RadzenColumn Size="3">
            <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Right" Gap="1rem" Style="margin-top: 0px; margin-bottom: 5px;">
                <RadzenButton ButtonType="ButtonType.Submit" Size="ButtonSize.Small" Icon="check_circle" Text="Zapisz" />
            </RadzenStack>
        </RadzenColumn>
    </RadzenRow>

best regards
Maciej