등록, 수정 폼 편리하게 만들기

등록 폼

먼저 등록 폼의 html을 응답할때 모델에 빈 객체를 담아서 넘겨주자.

th:object 사용을 위해 빈 오브젝트를 넘겨줄 필요가 있다.

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

 

넘어온 객체는 아래와 같이 타임리프를 사용하여 편리하게 사용할 수 있다.

<form action="item.html" th:action th:object="${item}" method="post">
    <input type="text" th:field="*{itemName}">
</form>

th:object="${item}"으로 넘어온 객체를 받는다.

th:field는 HTML 태그인 id, name, value 속성을 자동으로 생성해준다.

*{...}는 선택 변수 식이라고 th:object에서 선택한 객체에 대해 필드 접근한다.

 

위의 input 태그는 렌더링시 아래처럼 생성된다.

<input type="text" id="itemName" name="itemName" value="">

 

수정 폼

@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);
    return "form/editForm";
}

보통 수정할 객체를 모델에 담아 수정 HTML로 넘어간다.

 

<form action="item.html" th:action th:object="${item}" method="post">
    <input type="text" th:field="*{id}">
</form>

이때 th:object로 객체를 받아

th:field로 id, name, value를 생성하면 편리하게 수정 폼을 만들 수 있다.

 

이 타임리프 기능은 폼 검증 부분에서 빛을 바라니 알아두자.