检测 Blazor 中字段的有效状态

Question

我在 Blazor 服务器应用的对话框中有一个相当简单的编辑表单。添加了验证，它运行良好。

我不喜欢显示验证消息时跳来跳去的字段（见下文）。希望在没有消息时在字段下方添加额外的 space，然后在验证失败时将其替换为验证消息。

看起来应该很简单。在我的 razor 文件中，我们只使用 @if 语句来根据字段验证状态显示行或消息。但是对于我的生活，我找不到每个字段的属性。它必须存在，因为我可以收到一条消息并且我看到已读的框？

关于如何做到这一点有什么建议吗？

Razor 文件

<div class="form-group input-group">
     <span class="has-float-label">
         <SfTextBox id="Owner" @bind-Value="template.Owner" class="form-control" placeholder="Owner" />
         <label for="Owner">Owner</label>
         @if (template.Owner.ISVALID)
         {<span>&nbsp;</span>}
         else
         { <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>}
     </span>
</div>

Answer 1

跳跃的字段称为 CLS

您可以将它们包装在 div 和 min-height 中，例如：

<div style='min-height:5em'>
    <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>
</div>

检测 Blazor 中字段的有效状态

Detect valid status of a field in Blazor

blazor

blazor-server-side

syncfusion-blazor