Forms

The EditForm component is Blazor’s approach to managing user-input in a way that makes it easy to perform validation and represent validity state to the user.

Although it is possible to create forms using the standard <form> HTML element, I recommend using the EditForm component because of the additional features it provides us with.

The form model

The key feature to the EditForm is its Model parameter. This parameter provides the component with a context it can work with to enable user-interface binding and determine whether or not the user’s input is valid.

Let’s start by creating a class we can use with our EditForm. At this point a simple empty class will suffice.

public class Person
{
}

Edit the standard index.razor page as follows:

@page "/"

<EditForm [email protected]>
	<input type="submit" value="Submit" class="btn btn-primary"/>
</EditForm>

@code
{
	Person Person = new Person();
}

Line 9 creates an instance of a Person for our form to bind to. Line 3 creates an EditForm and sets its Model parameter to our instance. The preceding razor mark-up results in the following HTML.

<form>
	<input class="btn btn-primary" type="submit" value="Submit">
</form>

Detecting form submission

When the user clicks the Submit button in the preceding example, the EditForm will trigger its OnSubmit event. We can use this event in our code to handle any business logic.

@page "/"

<h1>Status: @Status</h1>
<EditForm [email protected] [email protected]>
	<input type="submit" value="Submit" class="btn btn-primary"/>
</EditForm>

@code
{
	string Status = "Not submitted";
	Person Person = new Person();

	void FormSubmitted()
	{
		Status = "Form submitted";
		// Post data to the server, etc
	}
}

Form submission will be covered in more depth in the Handling form submission section.