在包含枚举值的 InputSelect 中设置文本标题

Question

如何在包含从枚举 object 中提取的值的 InputSelect 组件中设置文本标题，以及如何验证已选择的值。

Answer 1

下面的代码示例描述了如何将 enum 与 InputSelect 内置组件一起使用，如何添加占位符，以及如何使用 Required 属性来确保用户在保存表单数据之前已经选择了一个值。

@page "/"

@using System.ComponentModel.DataAnnotations;

<EditForm EditContext="@EditContext" OnValidSubmit="HandleValidSubmit" 
                                                      Context="NewContext">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">Enter your Name: </label>
        <InputText Id="name" Class="form-control" @bind-Value="@comment.Name"> 
        </InputText>
        <ValidationMessage For="@(() => comment.Name)" />

    </div>
    <div class="form-group">
        <label for="body">Select your country: </label>
    <InputSelect ValueExpression="@(() => comment.Country)"
         Value="@comment.Country" ValueChanged="@((Country? args) => 
                                                comment.Country = args)">
        <option value="">Select country...</option>
        @foreach (var country in Enum.GetValues(typeof(Country)))
        {
            <option value="@country">@country</option>
        }
    </InputSelect>
    <ValidationMessage For="@(() => comment.Country)" />
    </div>

    <p>
        <button type="submit">Submit</button>
    </p>
</EditForm>


@code
    {
     
    private EditContext EditContext;
    private Comment comment = new Comment();

    private void HandleValidSubmit()
    {
        Console.WriteLine("Submitting");
    }
    protected override void OnInitialized()
    {
        EditContext = new EditContext(comment);
    
        base.OnInitialized();
    }
    
    public enum Country
    {
        USA,
        Britain,
        Germany,
        Israel

    }
    public class Comment
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public Country? Country { get; set; }
    }

}

注意：为了启用上述 InputSelect 组件的验证，无论您将第一个选项留空还是添加 label 文本，您都必须使 Country 属性可为空。 请注意，第一个选项的数值可能为 0 或 -1（如果您愿意，如 Angular）或任何数字。 价值是什么并不重要。 您可以使用字符串 Select 或空字符串，甚至根本不使用 value 属性。 它仍然有效。 这是因为检查是针对枚举的成员进行的，如果一个值，即第一个选项的值不是枚举的一部分，则会触发验证。 因此，枚举本身可以像这里所做的那样从 0 或 1 开始，或者从任何其他数字开始。