如何在Thymeleaf中设计成功的输入字段

Question

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

目前我有

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

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

但是，如果我将三元组的第二部分更改为'form-group has-success'，那么在初始表单GET请求中，当然，它会将其样式为成功，即使表单尚未发布。

我的问题:是否有一种方法在Thymeleaf处理以下

1. 显示没有任何样式的GET表单。
2. POST时应用has-error或has-success类

Answer 1

我认为您需要在后端为Model添加属性。在GET请求中，不改变任何东西。在您的POST请求中，添加一个属性:["hasErrors"， true]，如果您通过POST发送的表单数据不正确，则为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不为空，则可以根据布尔值hasErrors创建三元表达式。th:block为非html。你可以用一个div来代替它，但是你需要一个额外的div来检查布尔值

Answer 2

我不打算讨论GET/POST问题，但我认为这可以帮助你:

新增th:errorclass为错误

中的表单字段添加CSS类

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

在Thymeleaf 2.1中，为了简化这个结构，引入了一个新的th:errorclass属性处理器。该处理器将从同一标签中的name或:field属性中读取字段的名称，如果该字段有错误，则应用指定的类。

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

结果更加简洁。还要注意，th:errorclass的工作方式类似于th: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'
     : '' }">

现在可以了

1. 当用户获取表单时，hasAnyErrors为false，因此添加空字符串，并且输入和标签接收默认样式。
2. 当用户发布表单时，如果有任何错误，则计算三元制的第一部分。这增加了has-error或has-success样式。

灵感来自于罗尔·施特伦贝格的回答