Issue with multiple EditForm on the same page

[djoufson]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

Cannot use multiple EditForm inside a single page. An EditForm that works isolated, no longer works when put on the same page with another EditForm.

Expected Behavior

Regardless if there is another EditForm on the page, each component should work perfectly and independently.

When I put together two EditForm I get this exception: System.InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.

Steps To Reproduce

• GitHub repo: https://github.com/Djoufson/EditForm-Issue

Exceptions (if any)

System.InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.

.NET Version

8.0.100

Anything else?

dotnet —info output

.NET SDK: Version: 8.0.100 Commit: 57efcf1350 Workload version: 8.0.100-manifests.d75fd3e4

Runtime Environment: OS Name: Mac OS X OS Version: 13.5 OS Platform: Darwin RID: osx-x64 Base Path: /usr/local/share/dotnet/sdk/8.0.100/

.NET workloads installed: Workload version: 8.0.100-manifests.d75fd3e4 [maui-tizen] Installation Source: SDK 8.0.100 Manifest Version: 8.0.3/8.0.100 Manifest Path: /usr/local/share/dotnet/sdk-manifests/8.0.100/microsoft.net.sdk.maui/8.0.3/WorkloadManifest.json Install Type: FileBased

[ios] Installation Source: SDK 8.0.100 Manifest Version: 17.0.8490/8.0.100 Manifest Path: /usr/local/share/dotnet/sdk-manifests/8.0.100/microsoft.net.sdk.ios/17.0.8490/WorkloadManifest.json Install Type: FileBased

[aspire] Installation Source: SDK 8.0.100 Manifest Version: 8.0.0-preview.2.23619.3/8.0.100 Manifest Path: /usr/local/share/dotnet/sdk-manifests/8.0.100/microsoft.net.sdk.aspire/8.0.0-preview.2.23619.3/WorkloadManifest.json Install Type: FileBased

[maccatalyst] Installation Source: SDK 8.0.100 Manifest Version: 17.0.8490/8.0.100 Manifest Path: /usr/local/share/dotnet/sdk-manifests/8.0.100/microsoft.net.sdk.maccatalyst/17.0.8490/WorkloadManifest.json Install Type: FileBased

[android] Installation Source: SDK 8.0.100 Manifest Version: 34.0.52/8.0.100 Manifest Path: /usr/local/share/dotnet/sdk-manifests/8.0.100/microsoft.net.sdk.android/34.0.52/WorkloadManifest.json Install Type: FileBased

Host: Version: 8.0.0 Architecture: x64 Commit: 5535e31a71

.NET SDKs installed: 6.0.413 [/usr/local/share/dotnet/sdk] 6.0.417 [/usr/local/share/dotnet/sdk] 7.0.307 [/usr/local/share/dotnet/sdk] 7.0.311 [/usr/local/share/dotnet/sdk] 8.0.100 [/usr/local/share/dotnet/sdk]

.NET runtimes installed: Microsoft.AspNetCore.App 6.0.21 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.25 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 7.0.10 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 7.0.14 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 8.0.0 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App] Microsoft.NETCore.App 6.0.21 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.25 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App] Microsoft.NETCore.App 7.0.10 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App] Microsoft.NETCore.App 7.0.14 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App] Microsoft.NETCore.App 8.0.0 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

Other architectures found: None

Environment variables: Not set

global.json file: Not found

Learn more: https://aka.ms/dotnet/info

Download .NET: https://aka.ms/dotnet/download

[javiercn]

@Djoufson thanks for contacting us.

https://github.com/Djoufson/EditForm-Issue/blob/main/Components/Layout/SearchBar.razor#L12 https://github.com/Djoufson/EditForm-Issue/blob/main/Components/Layout/LoginForm.razor#L15

When posting, the value will be overriden by the binder if not present or not scoped. You can set in the FormName in the [SupplyParameterFromForm] attribute to scope binding to that action or initialize the value within OnInitializedAsync.

[djoufson]

That worked just fine, thanks sir

[BenEskilstark]

I am having this exact same issue and @javiercn I have no idea what you are talking about. Can you show an example?

[djoufson]

@BenEskilstark just see those two lines: https://github.com/Djoufson/EditForm-Issue/blob/main/Components/Layout/SearchBar.razor#L12 https://github.com/Djoufson/EditForm-Issue/blob/main/Components/Layout/LoginForm.razor#L15

The solution is to mention from which EditForm we are attempting to get informations. It worked for me

[janaka44]

@BenEskilstark code example with the change: [SupplyParameterFromForm(FormName="search-form")] private SearchModel Model { get; set; } = new(); Notice the addition of FormName="search-form" to link with a form.

@javiercn I have a similar situation with multiple EditForms that do not work. All forms are correctly linked with FormName on corresponding Model objects. Since only a single form should be shown at once (works as 3 pages), I show/hide the form contents (content inside the EditForm) based on conditions. The issue is, only the first form validation works correctly. Even the rest of the forms appear on page, the OnVaildSubmit() doesn't get fired, but OnSubmit is bypassing form validation (using ). I guess an initialization issue could be there due to show/hide operations.

If I change the order of the forms (moving either the 2nd/3rd form to appear first) then it works. any idea why ?

To show/hide I have tried both these methods:

• Blazor @if conditions
• CSS visibility conditions using CSS classes