blazor - 在 Blazor 中检测字段的有效状态

Question

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

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

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

关于如何做到这一点的任何建议？

剃刀文件

<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>