将类添加到 Blazor(Razor) 验证

Question

我知道 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 来实现。

Answer 1

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

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

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

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