Blazor 服务器应用程序 InputSelect 未标记为无效

Question

希望每个人都度过愉快的一天！我一直在努力使用 .NET Core 6.0 来验证 Blazor Server 项目中的 InputSelect 组件

提供的是我的浏览器 Chrome 的屏幕截图：

提供的是我正在执行的验证的代码，我编写了自己的自定义验证属性：

public class GuidSelectValidation : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext? validationContext)
    {
        if (value != null)
        {
            if (value.Equals(new Guid()))
            {
                return new ValidationResult(ErrorMessage);
            }
            else
            {
                return ValidationResult.Success;
            }
        }
        else
        {
            return new ValidationResult(ErrorMessage);
        }
    }
}

这是我用来处理数据操作的 DTO：

public class AddressData
{
    public Guid Id { get; set; }

    [Required(ErrorMessage = "The Primary Street Address is required.")]
    public string Address1 { get; set; } = string.Empty;

    public string Address2 { get; set; } = string.Empty;

    public string Address3 { get; set; } = string.Empty;

    [Required]
    public string City { get; set;} = string.Empty;

    [Required]
    public string State { get; set;} = string.Empty;

    [Required]
    public string Zip { get; set; } = string.Empty;

    [GuidSelectValidation(ErrorMessage = "You must select a county for the address.")]
    public Guid County { get; set; }

    public string Country { get; set; } = "US";

    [GuidSelectValidation(ErrorMessage = "You must select an address type for the address.")]
    public Guid AddressType { get; set; }
}

提供的是我在该特定部分的页面上的标记：

<EditForm @ref="editForm" Model="@model">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="row bottom-padding">
        <div class="col-lg-6 bottom-padding">
            <label class="form-label col-lg-5">Primary Street Address</label>
            <InputTextArea class="form-control" @bind-Value="model.Address1"></InputTextArea>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="form-label col-lg-5">Secondary Street Address</label>
            <InputTextArea class="form-control" @bind-Value="model.Address2"></InputTextArea>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="form-label col-lg-5">On Behalf Of</label>
            <InputTextArea class="form-control" @bind-Value="model.Address3"></InputTextArea>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="form-label col-lg-3">City</label>
            <InputText class="form-control" @bind-Value="model.City"></InputText>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="form-label col-lg-3">State</label>
            <InputText class="form-control" @bind-Value="model.State"></InputText>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="form-label col-lg-3">Zip</label>
            <InputText class="form-control" @bind-Value="model.Zip"></InputText>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="control-label">County</label>
            <InputSelect @bind-Value="model.County" class="form-control">
                @if (model.County == new Guid())
                {
                    <option value="@(new Guid())" selected>[Select County]</option>
                }
                else
                {
                    <option value="@(new Guid())">[Select County]</option>
                }
                @foreach (var county in counties)
                {
                    <option value="@county.Id">@county.CountyName</option>
                }
            </InputSelect>
        </div>

        <div class="col-lg-6 bottom-padding">
            <label class="control-label">Address Type</label>
            <InputSelect @bind-Value="model.AddressType" class="form-control">
                @if(model.AddressType == new Guid())
                {
                    <option value="@(new Guid())" selected>[Select Type]</option>
                }
                else
                {
                    <option value="@(new Guid())">[Select Type]</option>
                }
                @foreach (var type in addressTypes)
                {
                    <option value="@type.Id">@type.Name</option>
                }
            </InputSelect>
        </div>

        <button type="button" @onclick="() => OnDelete()" class="btn btn-danger">Delete Address</button>
    </div>
</EditForm>

@code {
    [Parameter]
    public AddressData model { get; set; }

    [Parameter]
    public List<RefCounty> counties { get; set; }

    [Parameter]
    public List<RefAddressType> addressTypes { get; set; }

    [Parameter]
    public EventCallback<AddressData> DeleteAddress { get; set; }

    [Parameter]
    public EventCallback<AddressData> modelChanged { get; set; }

    private async Task OnDelete()
    {
        await DeleteAddress.InvokeAsync(model);
    }

    private EditForm editForm;

    public bool CanSubmit()
    {
        return editForm.EditContext.Validate();
    }
}

关于如何让 InputSelect 被红色包围有什么线索吗？基本上，在检查源时，它表明它是有效的，但显然不是，因为我抛出一个错误，指出必须选择信息。

如有任何想法或建议，我们将不胜感激。

我已经编写了自己的验证方法，但它似乎仍然无法在网页上正确处理此问题或触发EditForm中的输入选择无效。

Answer 1

无效时必须返回文件名

public class GuidSelectValidation : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext? validationContext)
    {
        if (value != null)
        {
            if (value.Equals(new Guid()))
            {
                return new ValidationResult(ErrorMessage, new[] { validationContext.MemberName });
            }
            else
            {
                return ValidationResult.Success;
            }
        }
        else
        {
            return new ValidationResult(ErrorMessage, new[] { validationContext.MemberName });
        }
    }
}

现在可以了：