thymeleaf - 动态 :attr definition for multiple attributes in one html element with thymeleaf

Question

我正在尝试概括表单的表单字段。我想要不一样的parsley.js验证要求。我想动态附加到输入字段的 2 个非标准属性:required和 data-parsley-range .一个没有 thymeleaf 的简单 html 的例子是:

<input type=text required data-parsley-range=[1,100] />

我用 thymeleaf 尝试了以下方法:

<input class="form-control" fieldType="text" th:attr="required=${field.isRequired ? 'required' : null}" 
th:attr="data-parsley-range=${field.validStringLengthMin ? [${field.validStringLengthMin},${field.validStringLengthMax}] : null}"/>

但我有一个错误 th:attr被多次定义。

所以我的问题是:如何在 th:attr 的帮助下定义多个属性在单个 html 元素中？

我的附加问题是:如何有条件地放置属性？例如我不想写 required='required'如果我可以避免它，同样适用于范围。

Answer 1

直接的解决方案是使用逗号 ,分隔多个属性。

<input th:attr="required=${field.isRequired ? 'required' : null}, data-parsley-range=${field.validStringLengthMin ? [${field.validStringLengthMin},${field.validStringLengthMax}] : null}" />

或者，如果您想单独保留属性以便更好地阅读，您可以使用 th:attrappend :

<input th:attr="required=${field.isRequired ? 'required' : null}" 
th:attrappend="data-parsley-range=${field.validStringLengthMin ? [${field.validStringLengthMin},${field.validStringLengthMax}] : null}" />