BasicFormFluentUIComponents.razor

@page "/basicform-fluentui-components"
@inject DataSource Data

<PageTitle>@App.PageTitle("Basic Form FluentUI")</PageTitle>

<h1>Starfleet Starship Database</h1>
<p>
    This form uses the Fluent UI input components. It uses a <code>DataAnnotationsValidator</code>, a <code>FluentValidationSummary</code>
    and <code>FluentValidationMessage</code>s.
</p>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit" FormName="starship_fluent_entry" novalidate>
    <DataAnnotationsValidator />
    <FluentValidationSummary />


    <FluentStack Orientation="Orientation.Vertical">
        <div>
            <FluentTextField Name="identifier" @bind-Value="starship.Identifier" Label="Identifier" Required />
            <FluentValidationMessage For="@(() => starship.Identifier)" />
        </div>
        <div>
            <FluentTextArea Name="description" Rows=5 Cols=60 @bind-Value="starship.Description" Label="Description (optional)" Required />
            <FluentValidationMessage For="@(() => starship.Description)" />
        </div>
        <div>
            <FluentAutocomplete TOption="Country"
                                Name="countries"
                                AutoComplete="off"
                                Required
                                Label="Select countries"
                                Width="250px"
                                Placeholder="Select countries"
                                OnOptionsSearch="@OnSearchAsync"
                                MaximumSelectedOptions="3"
                                OptionText="@(item => item.Name)"
                                Multiple="true"
                                @bind-SelectedOptions="@starship.Countries" />
            <FluentValidationMessage For="@(() => starship.Countries)" />
        </div>
        <div>
            <FluentSelect Name="class" Id="classification" @bind-Value="starship.Classification" TOption="string" Required Label="Primary Classification">
                <FluentOption Value="">Select classification ...</FluentOption>
                <FluentOption Value="Exploration">Exploration</FluentOption>
                <FluentOption Value="Diplomacy">Diplomacy</FluentOption>
                <FluentOption Value="Defense">Defense</FluentOption>
            </FluentSelect>
            <FluentValidationMessage For="@(() => starship.Classification)" />
        </div>
        <div>
            <FluentNumberField Name="accomodation" @bind-Value="starship.MaximumAccommodation" Label="Maximum Accommodation" Required />
            <FluentValidationMessage For="@(() => starship.MaximumAccommodation)" />
        </div>
        <div>
            <FluentCheckbox Name="approved" @bind-Value="starship.IsValidatedDesign" Required Label="Engineering approval" />
            <FluentValidationMessage For="@(() => starship.IsValidatedDesign)" />
        </div>
        <div>
            <FluentDatePicker Name="production_date" Id="proddate" @bind-Value="starship.ProductionDate" Label="Production Date" Required />
            <FluentValidationMessage For="@(() => starship.ProductionDate)" />
        </div>
        <div>
            <FluentSwitch Name="teleporter" @bind-value="starship.HasTeleporter" Label="Teleporter" CheckedMessage="Fully operational" UncheckedMessage="Under maintenance"/>
            <FluentValidationMessage For="@(() => starship.HasTeleporter)" />
        </div>
        <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Submit</FluentButton>
    </FluentStack>
</EditForm>

<div style="margin-top: 3rem;"><a href="http://www.startrek.com/">Star Trek</a>, ©1966-2023 CBS Studios, Inc. and <a href="https://www.paramount.com">Paramount Pictures</a></div>
@code {


    protected override void OnInitialized()
    {
        starship.ProductionDate = DateTime.Now;
    }

    IEnumerable<Country> SelectedItems = Array.Empty<Country>();

    private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        var allCountries = await Data.GetCountriesAsync();
        e.Items = allCountries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                              .OrderBy(i => i.Name);
    }

    [SupplyParameterFromForm]
    private Starship starship { get; set; } = new();

    private void HandleValidSubmit()
    {
        DemoLogger.WriteLine("HandleValidSubmit called");

        // Process the valid form
    }
}