18. 스프링 타임리프 폼

@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">
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" th:field="${item.itemName}" class="form-control" 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="form-control" placeholder="수량을 입력하세요">
    </div>

    <hr class="my-4">

    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'"
                    th:onclick="|location.href='@{/form/items}'|"
                    type="button">취소</button>
        </div>
    </div>

</form>

th:object 커맨드 객체로 지정해 주는거다.

이거 하면 이제 *{} 이렇게 쓸 수 있다.

원래 보통 ${item.itemName} 이렇게 써야 하는데,

저게 커맨드 객체라서 *{itemName} 이렇게 쓰면 ${item.itemName} 이거랑 같다.

 

저건 자손포함 태그에 하나밖에 못 쓴다.

 

th:field 이거는 th:field="${item.itemName}" 이렇게 해주면

id, name, value를 자동으로 생성해준다.

id, name은 저 itemName이라는 변수이름과 똑같이 되고, value는 item.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";
}

넘겨준다. 찾아서.

 

 

<form action="item.html" th:object="${item}" th:action 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="form-control">
    </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="form-control" >
    </div>

    <hr class="my-4">

    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg" type="submit">저장</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='item.html'"
                    th:onclick="|location.href='@{/form/items/{itemId}(itemId=${item.id})}'|"
                    type="button">취소</button>
        </div>
    </div>

</form>

편하다.

 

근데 이 th:object랑 th:field의 진면목은 검증 부분에서 나온다고 한다.