Thymeleaf - 입력 폼 처리

● th:object : 커맨드 객체를 지정한다.

● *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다.

● th:field
      ● HTML 태그의 id , name , value 속성을 자동으로 처리해준다.

 

 

렌더링 전

<input type="text" th:field="*{itemName}" />

렌더링 후

<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />

 

등록 폼

th:object 를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어서 뷰에 전달하자.

 

 

FormItemController 변경

@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item());return "form/addForm";
}

 

form/addForm.html

<form action="item.html" th:action th:object="${item}" method="post">
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" th:field="*{itemName}" class="formcontrol" placeholder="이름을 입력하세요">
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" th:field="*{quantity}" class="formcontrol" placeholder="수량을 입력하세요">
</div>

● th:object="${item}" : <form> 에서 사용할 객체를 지정한다. 선택 변수 식( *{...} )을 적용할 수 있다.

● th:field="*{itemName}"
      ● *{itemName} 는 선택 변수 식을 사용했는데, ${item.itemName} 과 같다. 앞서 th:object 로 item 을 선택했기 때문에 선택 변수 식을 적용할 수 있다.
      ● th:field 는 id , name , value 속성을 모두 자동으로 만들어준다.
           ● id : th:field 에서 지정한 변수 이름과 같다. id="itemName"
           ● name : th:field 에서 지정한 변수 이름과 같다. name="itemName"
           ● value : th:field 에서 지정한 변수의 값을 사용한다. value=""

 

참고로 해당 예제에서 id 속성을 제거해도 th:field 가 자동으로 만들어준다

 

 

렌더링 전

<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">

 

 

렌더링 후

<input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">

 

 

 

수정 폼

 

form/editForm.html

<form action="item.html" th:action th:object="${item}" method="post">
<div>
<label for="id">상품 ID</label>
<input type="text" id="id" th:field="*{id}" class="form-control" readonly>
</div>
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" th:field="*{itemName}" class="formcontrol">
</div>
<div><label for="price">가격</label>
<input type="text" id="price" th:field="*{price}" class="form-control">
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" th:field="*{quantity}" class="formcontrol">
</div>

 

 

렌더링 전

 

<input type="text" id="itemName" th:field="*{itemName}" class="form-control">

렌더링 후

 

<input type="text" id="itemName" class="form-control" name="itemName" value="itemA">

 

 

 

 

출처 : 김영한 MVC2 강의