java - 如何使用 th :classapend if a form error on another field exists?

Question

使用 Thymeleaf，如果特定错误 div(为表单输入错误保留)不可见，我想连续将 CSS 类附加到 div。

我正在使用 Bootstrap 4，它是网格系统。我尝试了一些列偏移将相应的错误 div 带到正确的位置。您可能会想到一个映射，其中一个输入字段用于键，一个用于值。单个映射条目(键值对)的输入字段显示在一行中，错误消息的 div 显示在这些输入字段下方的一行中。我有几个不同的案例:* 键输入字段中的错误(例如，重复或空键)加上值输入字段中的错误(这里我只使用两个 col-6 Bootstrap 类) - 这种情况没有问题，这里我只使用具有相同的列宽度作为输入字段* 仅在关键输入字段中出现错误 - 也没有问题，因为所有内容都左对齐* 仅在值输入字段中出现错误 - 在这里，我想使用列偏移 CSS 类，这将取决于键上没有输入错误的事实

<form ...>
...
  <div th:each="item, iter: ${viewModel.map}">

    <div class="input-group control-group mt-1">
      <input th:field="${viewModel.map[__${iter.index}__].key}"
        th:errorClass="is-invalid"
        class="form-control">
      <input th:field="${viewModel.map[__${iter.index}__].value}"
        th:errorClass="is-invalid"
        class="form-control">
    </div>

    <div class="row invalid-feedback">
      <div class="col-6"
        th:errors="${viewModel.map[__${iter.index}__].key}"></div>
      <div class="col-6"
        th:errors="${viewModel.map[__${iter.index}__].value}"></div>
      <!-- I've been trying something like the following for the value
        th:classappend="${viewModel.map[__${iter.index}__].key == null ? offset-sm-6 : ''}"
      -->
    </div>
  </div>
...
</form>

如果键没有任何错误，但值字段有一些错误， View 应该如下所示

| input key      | input value      |
|                | error message    |

Answer 1

在做了一些进一步的研究之后，我能够通过左列属性部分的 #fields.hasErrors 解决这个问题(参见 th:classappend 的行:

<form ...>
...
  <div th:each="item, iter: ${viewModel.map}">

    <div class="input-group control-group mt-1">
      <input th:field="${viewModel.map[__${iter.index}__].key}"
        th:errorClass="is-invalid"
        class="form-control">
      <input th:field="${viewModel.map[__${iter.index}__].value}"
        th:errorClass="is-invalid"
        class="form-control">
    </div>

    <div class="row invalid-feedback">
      <div class="col-6"
        th:errors="${viewModel.map[__${iter.index}__].key}"></div>
      <div class="col-6"
        th:classappend="${#fields.hasErrors('${viewModel.map[__${iter.index}__].key}') ? '' : 'offset-sm-6'}"
        th:errors="${viewModel.map[__${iter.index}__].value}"></div>
    </div>
  </div>
...
</form>