Blazor：如何让绑定必填模型属性的自定义组件自动高亮

要让自定义组件和原生Input组件一样，在表单验证失败时自动高亮，需要让组件接入Blazor的表单验证体系，核心是实现验证接口并关联字段状态，具体步骤如下：

1. 改造自定义组件，接入验证体系 #

修改TestEditorComponent.razor，添加验证相关的逻辑：

@inject EditContext EditContext
@implements IValidateComponent

<!-- 动态添加invalid类实现高亮 -->
<div class="@ValidationClass">
    <input type="text" @bind="@Text" @bind:event="oninput" />
    <!-- 显示验证错误信息 -->
    @if (HasValidationErrors)
    {
        <div class="validation-message">@ValidationMessage</div>
    }
</div>

@code {
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public EventCallback<string> TextChanged { get; set; }

    // 关键参数：用于定位模型中的目标属性
    [Parameter]
    public Expression<Func<string>> TextExpression { get; set; }

    private FieldIdentifier _fieldIdentifier;
    // 判断当前字段是否有验证错误
    private bool HasValidationErrors => EditContext.GetValidationMessages(_fieldIdentifier).Any();
    // 动态生成验证样式类
    private string ValidationClass => HasValidationErrors ? "invalid" : "";
    // 获取第一条验证错误信息
    private string ValidationMessage => EditContext.GetValidationMessages(_fieldIdentifier).FirstOrDefault();

    protected override void OnInitialized()
    {
        // 通过TextExpression创建字段标识，关联到模型的具体属性
        _fieldIdentifier = FieldIdentifier.Create(TextExpression);
        // 监听表单验证状态变化，触发组件重新渲染
        EditContext.OnValidationStateChanged += HandleValidationStateChanged;
    }

    private void HandleValidationStateChanged(object sender, ValidationStateChangedEventArgs e)
    {
        StateHasChanged();
    }

    // 实现IValidateComponent接口的方法，触发验证更新
    public void Validate()
    {
        EditContext.NotifyValidationStateChanged();
    }

    public ValueTask ValidateAsync()
    {
        EditContext.NotifyValidationStateChanged();
        return ValueTask.CompletedTask;
    }

    // 销毁时移除事件监听，避免内存泄漏
    public override void Dispose()
    {
        EditContext.OnValidationStateChanged -= HandleValidationStateChanged;
        base.Dispose();
    }
}

2. 添加验证样式（可选） #

如果需要和原生Input组件的高亮样式保持一致，添加以下CSS：

.invalid input {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.validation-message {
    color: #dc3545;
    font-size: 0.875em;
}

3. 表单中正常使用自定义组件 #

在EditForm中使用组件时，保持原有的双向绑定方式即可：

<EditForm Model="@weather" OnValidSubmit="@HandleSubmit">
    <!-- 必须添加数据注解验证器 -->
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>自定义编辑器:</label>
        <TestEditorComponent @bind-Text="@weather.Summary" />
    </div>

    <button type="submit">提交</button>
</EditForm>

@code {
    private WeatherForecast weather = new();

    private void HandleSubmit()
    {
        // 提交逻辑
    }

    public class WeatherForecast
    {
        [Required(ErrorMessage = "摘要为必填项")]
        public string Summary { get; set; }
    }
}

核心原理说明 #

• EditContext注入：获取当前表单的验证上下文，跟踪字段的验证状态。
• IValidateComponent接口：让组件成为Blazor表单验证体系的一部分，响应验证状态变化。
• TextExpression参数：Blazor双向绑定时自动传递，用于定位模型中的具体属性，确保验证器能关联到正确的字段。
• 验证状态监听：通过OnValidationStateChanged事件，在表单验证状态变化时重新渲染组件，更新样式和错误信息。

内容的提问来源于stack exchange，提问作者Fabio Leone