java如果另一个字段存在表单错误,如何使用th:classapend?
如果某个特定的错误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 |
# 1 楼答案
在做了一些进一步的研究之后,我能够用左列属性部分的
#fields.hasErrors
来解决这个问题(参见th:classappend
行: