将类添加到 Blazor(Razor) 验证答案

【问题标题】：Adding classes to Blazor(Razor) Validation将类添加到 Blazor(Razor) 验证
【发布时间】：2020-07-13 18:48:56
【问题描述】：

我知道 Blazor 开发轨道还处于早期阶段，但我想知道是否有人遇到过将类应用于 Blazor (Razor) 验证消息的方法？这是一个代码示例。

        <EditForm Model="@Employee" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group row">
            <label for="lastName" class="col-sm-3">Last Name: </label>
            <div class="col-sm-8">
                <InputText id="lastName" @bind-Value="@Employee.LastName" class="form-control" placeholder="Enter last name" />
                <ValidationMessage For="@(() => Employee.LastName)" />
            </div>
        </div>

我希望能够在验证消息中添加text-danger、col-sm-8 或其他类。我已经知道我可以使用默认的 validation-error 类使用 CSS 来实现。

【问题讨论】：

标签： c# .net asp.net-core razor blazor

【解决方案1】：

如上所述，您可以将ValidationMessage 组件类子类化...我会给您一个更简单的解决方案，因为我不希望我的项目中有无数的类只是为了稍微改变外观。

只需用div 包装ValidatorMessage 并对其应用类：

<div class="col-sm-8 text-danger">
    <ValidationMessage For="@(() => Employee.LastName)" />
</div>

无论如何，ValidationMessage 组件所做的（通过代码）是使用类“validation-message”渲染一个简单的div，因此，如果您在未应用任何样式时遇到问题，请考虑到您可以使用正确的 CSS 选择器强制样式（可能还有一些 !important 标签...）。

【讨论】：

我确实想过这个，但我没有尝试过。我想知道如果有空 div 是否会在表单中添加不必要的间距？
它不是一个空的 div，它是一个包装的 div...无论如何，如果你不对其应用边距或填充，它不会添加任何额外的空间。
超级简单，效果很好。谢谢

【解决方案2】：

好像不能加类，但是可以加样式：

<ValidationMessage
    For="..."
    style="color: #dc3545!important;
           flex: 0 0 66.666667%;
           max-width: 66.666667%;" />

您还可以覆盖validation-message 类，如记录的here。

【讨论】：