Forms

Learning objectives#

• Build a form with EditForm
• Use built-in input components
• Handle valid and invalid submissions
• Make forms work with static SSR

Explanation#

EditForm wraps a model and creates an EditContext that tracks which fields changed and whether they are valid.

Input components (InputText, InputNumber, InputSelect, InputDate, InputCheckbox, InputTextArea) bind with @bind-Value and add CSS classes for valid/invalid states.

OnValidSubmit runs only when validation passes; OnInvalidSubmit when it fails; OnSubmit lets you decide yourself.

In static SSR, give the form a FormName and receive the model with [SupplyParameterFromForm].

Code example: Add product form#

1@page "/products/new"
2@inject IProductService Products
3@inject NavigationManager Nav
4

5<EditForm Model="Model" FormName="add-product" OnValidSubmit="SaveAsync">
6    <DataAnnotationsValidator />
7    <ValidationSummary />
8

9    <label>Name <InputText @bind-Value="Model.Name" /></label>
10    <label>Price <InputNumber @bind-Value="Model.Price" /></label>
11    <label>Category
12        <InputSelect @bind-Value="Model.Category">
13            <option value="">Choose…</option>
14            <option>Computers</option>
15            <option>Accessories</option>
16        </InputSelect>
17    </label>
18    <button type="submit">Save</button>
19</EditForm>
20

21@code {
22    [SupplyParameterFromForm] private ProductForm Model { get; set; } = new();
23

24    private async Task SaveAsync()
25    {
26        await Products.CreateAsync(Model);
27        Nav.NavigateTo("/products");
28    }
29}

Submitting an empty form lists the validation errors; a valid form saves the product and navigates to /products.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. EditForm binds to Model and is named so it works as a static SSR form.
2. DataAnnotationsValidator applies the model’s [Required] and [Range] rules.
3. Inputs bind with @bind-Value and get valid/invalid CSS classes.
4. SaveAsync runs only when the model is valid.

Real-world use case#

Common mistakes#

Best practices#

• Use a dedicated form model (DTO)
• Prefer OnValidSubmit
• Disable the submit button while saving
• Re-validate on the server/API

Remember this#

Practice exercise#

1<label>Description <InputTextArea @bind-Value="Model.Description" rows="4" /></label>

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.