将类添加到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组件类进行子类化。。。我会给你一个更简单的解决方案，因为我不喜欢在我的项目上有无数的类，只是为了稍微改变一下外观。

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

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

无论如何，ValidationMessage组件(通过代码(所做的是用类"来呈现一个简单的div；CCD_ 9"；因此，如果您对任何未应用的样式有问题，请考虑您可以使用正确的CSS选择器(可能还有一些!important标签…(强制样式

Answer 2

似乎不能添加类，但可以添加样式：

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

您也可以覆盖validation-message类，如本文所述。