0

I'm using Blazor with the FluentUI (v4.11.8) library and I'm trying to create a form that can handle both new entity creation and existing entity editing.

Once I load the form with a preselected value in FluentSelect and try to submit, the framework returns:

"Please select an item in the list" as if nothing has been selected.

This is a reproducible simplified sample:

Home.razor

@page "/" @rendermode InteractiveServer @inject NavigationManager Navigation <PageTitle>Home</PageTitle> <FluentNumberField Label="Fill with existing id from 1 to 3" @bind-Value="Id" /> <FluentButton OnClick="@(() => Navigation.NavigateTo($"edit/{Id}"))"> Edit or Create </FluentButton> @code { public int? Id { get; set; } } 

FormComponent.razor

@page "/edit/{Id:int?}" @rendermode InteractiveServer <PageTitle>Form Component</PageTitle> <EditForm FormName="theform" Model="@study" OnValidSubmit="@HandleValidSubmit"> <FluentSelect Required="true" Items="@studies" OptionText="@(o => o.Text)" OptionValue="@(o => o.Value!.Name)" @bind-Value="selectedStudy"/> <FluentButton Appearance="Appearance.Accent" Type="ButtonType.Submit"> Submit </FluentButton> </EditForm> @code { [Parameter] public int? Id { get; set; } private List<Option<Study>> studies = new List<Option<Study>> { new Option<Study>(){ Value = new Study { Id = 1, Name = "Study 1" }, Text = "Study 1"}, new Option<Study>(){ Value = new Study { Id = 2, Name = "Study 2" }, Text = "Study 2"}, new Option<Study>(){ Value = new Study { Id = 3, Name = "Study 3" }, Text = "Study 3"} }; private string? selectedStudy; private Study study = new Study(); protected override void OnInitialized() { if (Id.HasValue) { selectedStudy = studies.Single(study => study.Value!.Id == Id.Value).Value!.Name; } } private void HandleValidSubmit() { } public class Study { public int Id { get; set; } public string Name { get; set; } = string.Empty; } } 

If I input an id and go to edit, the preselected value is displayed as expected. Unfortunately, the form is still considered invalid.

How can I make the edit form valid with preselected/preloaded values?

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.