Blazor自定义Select组件验证失败时无法添加'invalid'类的问题

1. 修正TryParseValueFromString方法的逻辑错误 #

你的TryParseValueFromString返回值完全搞反了：转换成功时应返回true，失败时返回false。这个方法的返回值直接决定InputBase的验证状态，是核心问题。

修正后的代码：

protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage)
{
    if (BindConverter.TryConvertTo<TValue>(value, null, out result))
    {
        validationErrorMessage = null;
        return true; // 转换成功返回true
    }
    else
    {
        validationErrorMessage = "错误：选择值无效";
        return false; // 转换失败返回false
    }
}

2. 绑定InputBase的CssClass到组件根元素 #

InputBase内置CssClass属性，验证失败时会自动添加invalid类。你需要在组件根div中结合自定义类与该属性：

修改Select.razor：

<div id="select-@Id" class="component-select @CssClass" @ref="ReferenceToDiv">
    @foreach (var option in Options)
    {
        <div @onclick="() => OnSelect(option)" class="option">@option.Text</div>
    }
</div>

3. 优化OnSelect方法的验证触发逻辑 #

直接赋值CurrentValue虽能更新绑定，但通过CurrentValueAsString可触发完整验证流程，确保状态同步：

public void OnSelect(SelectOption? option)
{
    if (option == null) return;

    // 测试用：强制设置空值触发验证失败
    option.Value = "";

    // 通过CurrentValueAsString触发转换和验证
    CurrentValueAsString = option.Value;
    SelectedOption = option;

    // 触发外部回调（如果需要）
    if (OnSelected.HasDelegate)
    {
        OnSelected.InvokeAsync(this);
    }
}

4. 确保模型验证属性配置正确（可选） #

确认AddDto.InvestmentEntityId字段带有对应验证属性，比如[Required]，提交表单时才会触发验证：

public class YourDtoClass
{
    [Required(ErrorMessage = "请选择投资实体")]
    public string InvestmentEntityId { get; set; } = string.Empty;
}

原理说明 #

• InputBase会根据TryParseValueFromString的结果和模型验证状态，自动维护CssClass中的invalid类。
• 验证失败时，CssClass会包含invalid，绑定到根元素后即可自动应用样式，和Blazor内置组件行为一致。

内容的提问来源于stack exchange，提问作者Musaffar Patel