Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to get form valid FluentSelect has preselected value

$
0
0

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

Once I load the form with FluentSelect preselected value and try to ask for submit, the framework returns "Please select an item in the list" like anything haven't 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, I'll find the preselected value, that I expect is a valid value. Unfortunately the form is recognized as not valid.

How to get edit form valid with preselected/preloaded values?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>