[Thymeleaf] th:value와 th:field를 함께 쓰면 value는 무시된다.

게시글의 수정 파트를 제작하기 위해 아래와 같이 코드를 작성하였을 때,

<div class="board-body">
  <span class="board-body-title">제목</span>
  <span id="board-input-title"> <input name="recommendTitle"
                                       th:value="${post.getRecommendTitle()}"
                                       th:field="*{recommendTitle}"
                                       th:placeholder="|제목을 입력해주세요(100자 이내)|"/></span>
</div>

다음과 같이 value 명령이 진행되지 않고, 계속해서 placeholder의 값만 화면에 등장하였다.

 

th:field의 값을 제거하고 나서야, 원하는 값이 반환되기 시작했는데

th:field는 HTML 태그의 id, name, value 속성을 자동으로 매핑시켜주는 역할을 하므로 value의 값을 무시하게 되는 것입니다.

결과

<div class="board-body">
  <span class="board-body-title">제목</span>
  <span id="board-input-title"> <input name="recommendTitle"
                                       th:value="${post.getRecommendTitle()}"
                                       th:placeholder="|제목을 입력해주세요(100자 이내)|"/></span>
</div>

 

참조

Tutorial: Thymeleaf + Spring

Thymeleaf th:field overwrites th:value