Définition dynamique de th: attr pour plusieurs attributs dans un élément html avec thymeleaf
J'essaie de généraliser les champs de formulaire pour un formulaire. Je veux avoir différents parsley.js exigences de validation. Il y a 2 attributs non standard que je veux ajouter dynamiquement au champ de saisie: required et data-parsley-range. Un exemple d'un simple html sans thymeleaf serait:
<input type=text required data-parsley-range=[1,100] />
J'ai essayé ce qui suit avec 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}"/>
Mais j'ai une erreur qui th:attr est défini plusieurs fois.
Ma question est donc la suivante: comment définir plusieurs attributs à l'aide de th:attr dans un seul élément html?
Ma question supplémentaire est: comment placer conditionnellement les attributs? Par exemple, je ne veux pas écrire required='required' du tout si je peux l'éviter, il en va de même pour la gamme.
La solution simple consiste à utiliser une virgule , pour séparer plusieurs attributs.
<input th:attr="required=${field.isRequired ? 'required' : null}, data-parsley-range=${field.validStringLengthMin ? [${field.validStringLengthMin},${field.validStringLengthMax}] : null}" />
Alternativement, si vous souhaitez conserver les attributs séparément pour une meilleure lecture, vous pouvez utiliser th:attrappend:
<input th:attr="required=${field.isRequired ? 'required' : null}"
th:attrappend="data-parsley-range=${field.validStringLengthMin ? [${field.validStringLengthMin},${field.validStringLengthMax}] : null}" />