Blazor 如何将ValidationMessage传入继承InputText的扩展组件内部渲染

你不需要额外手动传递验证表达式，因为InputText基类已经内置了ValueExpression参数，使用@bind-Value绑定的时候Blazor会自动为该参数赋值，刚好匹配ValidationMessage组件的For参数要求，直接在组件内部调用即可。

第一步：修改ExtendedInputText组件代码 #

@inherits InputText

<!-- 外层套div避免验证消息和输入框挤在同一行 -->
<div class="w-full">
    <div class="flex">
        <label class="w-1/2">
            @Label 
            @if(Required){
                <span class="text-red-500 ml-1">*</span>
            }
        </label>
        <InputText
            class="flex-1 border border-gray-200 bg-white p-2 rounded"
            placeholder="@Label"
            Value="@Value"
            ValueChanged="@ValueChanged"
            ValueExpression="@ValueExpression"
            Required="@Required"
        />
    </div>
    <!-- 直接使用基类自带的ValueExpression作为For参数即可 -->
    <ValidationMessage For="@ValueExpression" class="text-red-500 text-sm mt-1" />
</div>

@code
{
    [Parameter]
    public bool Required { get; set; }

    [Parameter]
    public string Label { get; set; }

    // 可选扩展：增加参数控制是否显示验证消息
    [Parameter]
    public bool ShowValidationMessage { get; set; } = true;
}

如果需要灵活控制是否显示验证消息，可以把<ValidationMessage>部分用条件判断包裹：

@if (ShowValidationMessage)
{
    <ValidationMessage For="@ValueExpression" class="text-red-500 text-sm mt-1" />
}

第二步：调用代码无需调整 #

你现有的组件调用逻辑完全不用修改，Blazor会在你使用@bind-Value语法时自动填充ValueExpression的取值：

<EditForm Model="Command" OnValidSubmit="OnValidSubmit">
  <FluentValidationValidator />
  <ValidationSummary />

  <ExtendedInputText Label="Title" Required="true" @bind-Value="Command.Title"/>

  <button type="submit" class="p-2 bg-positive-500 text-white rounded">Create</button>
</EditForm>

内容的提问来源于stack exchange，提问作者CT14.IT