I have two EditForms in a Blazor Static Server Component.
I want to show 2nd EditForm when first one is submitted, and then Submit 2nd EditForm and get it's data. But upon submitting 2nd EditForm I get this error that doesn't make any sense to me.
Cannot submit the form 'SecondForm' because no form on the page currently has that name.
Here are my two EditForms
@if(ShowSecondForm){<EditForm id="SecondForm" Model="SecondModel" method="post" OnValidSubmit="SecondValidSubmit" FormName="SecondForm" class="mt-4" Enhance><DataAnnotationsValidator /><InputText @bind-Value="SecondModel.FieldOne" class="form-control" autocomplete="FieldOne" aria-required="true" /><label for="FieldOne" class="form-label">FieldOne</label><ValidationMessage For="() => SecondModel.FieldOne" class="text-danger" /><br/><button type="submit" class="w-100 btn btn-primary">Submit</button></EditForm>}else{<EditForm id="FirstForm" Model="FirstModel" method="post" OnValidSubmit="FirstValidSubmit" FormName="FirstForm" class="mt-4" Enhance><DataAnnotationsValidator /><InputText @bind-Value="FirstModel.FieldOne" class="form-control" autocomplete="FieldOne" aria-required="true" /><label for="FieldOne" class="form-label">FieldOne</label><ValidationMessage For="() => FirstModel.FieldOne" class="text-danger" /><br/><button type="submit" class="w-100 btn btn-primary">Submit</button></EditForm>}@code { private bool ShowSecondForm = false; [SupplyParameterFromForm] private FirstModel FirstModel { get; set; } = new(); [SupplyParameterFromForm] private SecondModel SecondModel { get; set; } = new(); protected override async Task OnInitializedAsync() { FirstModel ??= new(); SecondModel ??= new(); } public void FirstValidSubmit() { //Make second form visible ShowSecondForm = true; } public void SecondValidSubmit() { //Debugger not hitting here }}I tried to add Enhance keywords to both the EditForms and tried data-permanent attribute as well, but it still didn't work.