java如果另一个字段存在表单错误，如何使用th:classapend？

Question

如果某个特定的错误div（为表单输入错误保留）不可见，我想使用Thymeleaf将CSS类附加到行中的一个div

我用的是Bootstrap 4，它是网格系统。我尝试了一些列偏移，以使相应的错误div处于正确的位置。您可能会想到一个地图，其中一个输入字段用于键，一个输入字段用于值。单个映射条目（键值对）的输入字段显示在一行中，错误消息的div显示在这些输入字段下面的一行中。我有几个不同的案例： *键输入字段中的错误（例如，重复键或空键）加上值输入字段中的错误（这里我只使用两个col-6引导类）——在这种情况下没有问题，这里我只使用与输入字段宽度相同的列 *只有键输入字段出错-也没问题，因为所有字段都是左对齐的 *仅在值输入字段中出错——在这里，我想使用一个列偏移量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>

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

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