时间戳

首页 > 解决方案 > 如果另一个字段上存在表单错误，如何使用 th:classapend？

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

问题描述

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

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

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

标签： javahtmlcssbootstrap-4thymeleaf

解决方案

在做了一些进一步的研究之后，我能够#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>

推荐阅读