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 eg 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 eg 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?

Answer 1

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.

Answer 2

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