Question

我想使用Bootstrap的成功和失败类与Thymeleaf。

到目前为止我已经

了

 <div th:class="${#fields.hasErrors('field')}? 'form-group has-error' : 'form-group'"></div>

当发布表单且字段无效时，这会正确显示失败样式。

但是，如果我将三元组的第二部分更改为“表格组已成功”，那么在初始表单GET请求中，当然，它会将其设置为成功，即使表格还没有发布。

我的问题：Thymeleaf是否有办法处理以下问题

在GET上显示没有任何样式的表单。
在POST上应用has-error或has-success类。

Answer 1

我认为您需要在后端为Model添加属性。在你GET请求中，什么都不做。如果您通过帖子发送的表单数据不正确，则在POST请求中添加一个属性：[＆＃34; hasErrors＆＃34;，true]，否则为false。

现在在您的html中，您可以添加以下内容：

<th:block th:if="${hasErrors != null}">
    <div th:class="${hasErrors ? 'form-group has-error' : 'form-group has success'"></div>
</th:block>
<th:block th:unless="${hasErrors != null}">
    <div class="form-group"></div>
</th:block>

您检查hasErrors模型属性是否为空，如果是，则表示您在GET方法中，并且您应该显示一个简单的表单组。如果hasErrors不为null，则可以基于布尔值hasErrors创建三元表达式。 th:block是非HTML。你可以用div替换它，但是你需要一个额外的div来检查一个布尔值。

Answer 2

我没有进入GET / POST问题，但我认为这可以帮到你：

新 th：errorclass ，用于将CSS类添加到错误的表单字段

到目前为止，每当我们想要在该字段存在错误时将特定CSS类应用于表单中的输入字段时，我们需要使用th：class或th：classappend属性。

在Thymeleaf 2.1中，为了简化这种结构，引入了一个新的th：errorclass属性处理器。此处理器将从同一标记中的name或th：field属性读取字段的名称，并在此类字段有错误时应用指定的类。

请注意，'error'文字实际上是一个标记，因此实际上不需要单引号。

结果更加简洁。还要注意：mysclass的工作原理如下：classappend，而不是th：class。因此，指定的类实际上将附加到任何现有的类。

http://www.thymeleaf.org/whatsnew21.html#errcl

Answer 3

我发现Thymeleaf是一个hasAnyErrors函数。

<div class="form-group row" 
     th:attrappend="class=${#fields.hasAnyErrors() 
     ? #fields.hasErrors('field') ? ' has-error' : ' has-success'
     : '' }">

这现在有效。

当用户获取表单时，hasAnyErrors为false，因此附加空字符串，输入和标签将接收默认样式。
当用户POST表单时，如果有任何错误，则评估三元组的第一部分。这会添加has-error或has-success样式。

这是受到Roel Strolenberg在下面的回答的启发。

如何在Thymeleaf

3 个答案: