@page "/forms"
@rendermode InteractiveServer
@using System.ComponentModel.DataAnnotations
Forms
Forms Demo
All input components with DataAnnotations validation.
@if (_submitted)
{
✓ Form submitted successfully
Name: @_submittedName
}
@code {
private FormModel Model { get; set; } = new();
private EditContext _editContext = null!;
private bool _submitted;
private string _submittedName = "";
protected override void OnInitialized()
{
_editContext = new EditContext(Model);
}
private string? GetError(string fieldName)
{
var field = _editContext.Field(fieldName);
var messages = _editContext.GetValidationMessages(field);
return messages.FirstOrDefault();
}
private void HandleSubmit()
{
_submitted = false;
if (!_editContext.Validate())
return;
_submittedName = Model.Name!;
_submitted = true;
}
private void HandleReset()
{
Model = new();
_submitted = false;
_editContext = new EditContext(Model);
}
public class FormModel
{
[Required(ErrorMessage = "Name is required.")]
[StringLength(100, MinimumLength = 2, ErrorMessage = "Name must be 2–100 characters.")]
public string? Name { get; set; }
[Required(ErrorMessage = "Email is required.")]
[EmailAddress(ErrorMessage = "Invalid email address.")]
public string? Email { get; set; }
[Required(ErrorMessage = "Password is required.")]
[StringLength(64, MinimumLength = 8, ErrorMessage = "Password must be 8–64 characters.")]
public string? Password { get; set; }
[Required(ErrorMessage = "Age is required.")]
[Range(1, 150, ErrorMessage = "Age must be between 1 and 150.")]
public double? Age { get; set; }
[Required(ErrorMessage = "Birth date is required.")]
public DateOnly? BirthDate { get; set; }
[Required(ErrorMessage = "Preferred time is required.")]
public TimeOnly? PreferredTime { get; set; }
[Required(ErrorMessage = "Appointment is required.")]
public DateTime? Appointment { get; set; }
}
}