Add conditional attribute with thymeleaf

Question

I have a thymeleaf fragment to create input fields like:

<div th:fragment="formField">
        <input th:type="${type}" th:errorclass="field_error" th:field="*{__${field}__}" th:placeholder="#{__${placeholder}__}" />
</div>

This fragment is e.g. used like:

<div th:replace="fragments :: formField (type='password', field='password', placeholder='resetPassword.form.password')">

Now the autofocus attribute should be added or not to the input field based on the parameters of the fragment. Using the fragment e.g. like this should add the autofocus attribute:

<div th:replace="fragments :: formField (type='password', field='password', placeholder='resetPassword.form.password', autofocus='autofocus')">

I could not find a way to add the autofocus attribute conditionally to the input tag based on the fragment parameters. I tried using th:attr but always ended up in syntax errors.

Is there a way to create html attributes conditionally with thymeleaf?

have you try that you declare the autofocus field in the html (first code snippet) The other fields are delcared. An other suggestion, you can try the th:with attribute from thymeleaf — Manu Zi
– Manu Zi, Commented Jan 17, 2015 at 9:52
There are special attributes for fixed-value-boolean-attributes, which allows you to set such special attributes like "autofocus" based on a boolean expression like <input ... th:autofocus="${autofocus}" ... /> — James
– James, Commented Jan 19, 2015 at 8:02

MLavoie · Accepted Answer · 2018-07-28 10:49:23Z

I guess the problem is that if you declare the additional parameter in the fragment - you need to pass it. Thus, you could pass either autofocus, or empty value ('') and process the check with Thymeleaf.

For instance, you call:

<div th:replace="fragments :: formField (type='password', field='password', 
     placeholder='resetPassword.form.password', autofocus='')">

Then process it with:

<div th:fragment="formField">
    <input th:if="${!autofocus.isEmpty()}" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}" autofocus="true"/>
    <input th:if="${autofocus.isEmpty()}" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}"/>
</div>

Or:

<div th:fragment="formField" th:switch="${autofocus}">
    <input th:case="'autofocus'" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}" autofocus="true"/>
    <input th:case="*" th:type="${type}" th:errorclass="field_error"
           th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}"/>
</div>

But I guess James comment to use th:autofocus would be the best solution:

<div th:fragment="formField">
        <input th:type="${type}" th:errorclass="field_error" 
               th:field="*{__${field}__}" th:placeholder="#{__${placeholder}__}" 
               th:autofocus="${!autofocus.isEmpty()}" />
</div>

In all the cases you still need to pass autofocus="autofocus" or autofocus="" as a parameter.

I wanted to avoid having two exact same <input /> fields which just differ in the autofocus attribute.

Community · Accepted Answer · 2017-05-23 11:52:46Z

0

I think it's a too complex task for an fragment. I solved such problem with a Dialect. See my question and the solution.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jan 17, 2015 at 15:05

niels

7,3092 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

Add conditional attribute with thymeleaf

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related