EditForm requires either a Model parameter, or an EditContext parameter

Question

How does one resolve this Blazor error?

EditForm requires either a Model parameter, or an EditContext parameter

I have created a minimally reproducible example below. The issue seems to be because the model is not instantiated...Why does the following simple page throw this error?

@page "/"
<EditForm @Model="@person">
    <input @bind="@person.FirstName" />
    <input @bind="@person.LastName" />
</EditForm>
@code 
{
    public Person person = new Person();
    protected override Task OnInitializedAsync()
    {
        person = new Person
        {
            FirstName = "Fred",
            LastName = "Flintstone"
        };
        return base.OnInitializedAsync();
    }
}

Spaceband

Answer 1

I can not only tell you the error, but tell you how to check it while typing in VS.

Change to this:

<EditForm Model="@person">

(i.e. with no "@" sign on Model)

When you're typing in the <Editform> line, when you press space, you'll see the list of expected variables, several of which start with @, like @ref, and several which do not, like Model.

Aphid

In newer versions of Blazor. You don't need the "@ " for the variable either. Like this: <EditForm Model=person> ... </EditForm>. This works with most custom Blazor Tags. – Discant

I had an answer to this question as well, but I deleted it yesterday. At the time of my original posting, I didn't have enough Rep to leave a comment. A few days ago, someone downvoted my answer and I thought it was due to me elaborating on your answer and not making it a comment instead. I noticed that I now have enough Rep to leave a comment. So I deleted my answer to this question and moved it to the comment section. I wonder if the same person who downvoted me downvoted your answer as well??? I can undelete my answer if you would like proof. I promise I don't want to ruffle any feathers – Discant

Stack Overflow says that I upvoted your answer on December 6th, 2023. I am not sure why it notified you that I downvoted instead of upvoting. Again, I am sorry for the confusion – Discant

It's all good. Your comment was 100% valid, and could be useful as it is currently the preferred syntax. My recommendation would be to cite a version when commenting very old threads: "Since .Net 5, the preferred syntax is XYZ." or "As of today, in 2024, we can do XYZ." Blazor's super-fast development cycle can make it hard to track which Blazor-verse you're talking about. – Aphid

My preferred method now, BTW, is to skip EditForm unless I really want the built in verbose validation. I normally just use vanilla html controls bound to parameters or variables in the @code section. It's surprising how rarely I actually need to validate input, despite having maybe 100 components in my site. – Aphid

Thank you for your guidance! I'll certainly implement that going forward! Like you, I don't often use EditForm. I completely agree! I primarily stick to vanilla HTML with C# as well. Occasionally, if basic validation is needed, it's usually for just one or two properties, and implementing a simple custom validation is easier than bringing in the entire EditForm. However, the majority of my validation work is done on the back-end server since I am using front-end Blazor (WASM). – Discant

Answer 2

I got this error after adding an EditForm to NavMenu.razor in a .net 8 blazor ssr and I had to use EditContext and remove Model property from EditForm tag in NavMenu.razor only.

<EditForm OnSubmit="Submit" FormName="SearchForm" EditContext="editContext">
    <div class="form-floating mb-3">
        <InputText @bind-Value="vm!.SearchText" class="form-control" placeholder />
        <label>Title</label>
    </div>
</EditForm>

cs file :

[SupplyParameterFromForm] public SearchVm? vm { get; set; }
private EditContext? editContext;

protected override void OnInitialized()
{
    vm ??= new();
    editContext = new(vm);
}

public void Submit()
{
    if (vm!.SearchText!.IsEmpty() == false)
        NavigationManager.NavigateTo($"Search/{vm!.SearchText}");
}

IsEmpty() extension method :

public static class StringExtensions
{
    public static bool IsEmpty(this string input)
    {
        return string.IsNullOrEmpty(input.Trim());
    }
}

Elimination

That helped me thanks. I needed to create the object in the OnInitialized method. – Agnate

Answer 3

This is not an answer on the error presented, which has been answered, but targets a different cause which can provoke the same error message

EditForm requires either a Model parameter, or an EditContext parameter

If refer to this issue that was raised with asp.net core. I was building up my form, focusing on the html-side, and wanted to have an in-between look. And encountered the same issue, yet I had defined an EditContext-parameter.

But it wasn't initialised yet in

  protected override void OnInitialized()


{
      SomeModel = new SomeModel();
      EditContext = new EditContext(SomeModel);
  }

with

<EditForm FormName="FakeLogin" EditContext="@EditContext" OnSubmit="Inloggen"></EditForm>

(and the properties of the model matching the fields of the form)

Congruency