Blazor Server：根据子表单验证状态设置MatExpansionPanel样式

我来给你分享两种实用方案，帮你实现当MatExpansionPanel内的表单字段验证失败时显示红色边框的需求：

这种方式适合需要精准控制哪些字段关联到哪个面板的场景，核心思路是通过EditContext检查面板内字段的验证结果：

首先在你的组件代码里注入EditContext，并实现一个判断面板内是否有无效字段的方法：

@inject EditContext EditContext
@* 假设你的模型是OrderModel，面板内是地址相关字段 *@
@code {
    [Parameter] public OrderModel Model { get; set; }

    private bool AddressPanelHasInvalidFields()
    {
        // 获取所有验证失败的字段名
        var invalidMemberNames = EditContext.GetValidationMessages()
            .SelectMany(msg => msg.MemberNames)
            .Distinct();
        
        // 判断这些字段是否属于当前面板（这里假设地址字段都以"Address."为前缀）
        return invalidMemberNames.Any(name => name.StartsWith("Address."));
    }
}

然后把这个方法绑定到MatExpansionPanel的Class属性上：

<MatExpansionPanel Class="@(AddressPanelHasInvalidFields() ? "invalid-panel" : "")">
    <MatExpansionPanelHeader>
        <MatPanelTitle>收货地址</MatPanelTitle>
    </MatExpansionPanelHeader>
    
    <MatTextField @bind-Value="Model.Address.Street" Label="街道" Required />
    <MatTextField @bind-Value="Model.Address.City" Label="城市" Required />
    <MatTextField @bind-Value="Model.Address.ZipCode" Label="邮编" Pattern="^\d{6}$" />
</MatExpansionPanel>

最后添加对应的CSS样式：

.invalid-panel {
    border: 2px solid #dc3545; /* 用Bootstrap的危险色，你可以自定义颜色 */
    border-radius: 4px;
    padding: 8px; /* 可选，避免边框和内容太挤 */
}

如果面板内的字段不多，你还可以直接通过组件引用来检查每个输入的验证状态，更直观：

@code {
    private MatTextField streetInput;
    private MatTextField cityInput;

    private bool AddressPanelHasInvalidFields()
    {
        return !streetInput.ValidationResult.IsValid || !cityInput.ValidationResult.IsValid;
    }
}

对应的HTML里给输入组件加@ref：

<MatTextField @ref="streetInput" @bind-Value="Model.Address.Street" Label="街道" Required />

如果你不想写额外的C#逻辑，这种方案更省心——利用MatBlazor验证失败时自动给输入组件添加的CSS类，结合CSS的:has()选择器来给父面板加样式：

直接添加这段CSS到你的组件或全局样式文件里：

/* 当面板内存在验证失败的MatBlazor表单组件时，给面板添加红色边框 */
.mat-expansion-panel:has(.mat-form-field-invalid) {
    border: 2px solid #dc3545;
    border-radius: 4px;
}

注意事项： #

• :has()选择器是CSS4的特性，现代浏览器（Chrome 105+、Firefox 121+、Edge 105+）都支持，如果你的项目需要兼容旧浏览器，可能需要用方案一。
• 确认MatBlazor在验证失败时给输入组件添加的类是mat-form-field-invalid（可以通过浏览器开发者工具查看生成的HTML确认），如果类名不同，替换成实际的类名即可。

两种方案各有优劣：方案一灵活性更高，能精准控制字段范围；方案二更简洁，不需要额外的C#代码。你可以根据自己的项目场景选择～

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