thymeleaf-1

<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="form-control" placeholder="이름을 입력하세요">
            <!--*{itemName}은 위에 th:object를 통해 ${item.itemName}과 같게됨. th:field는 렌더링되면 id와 name, value 속성을 자동으로 만들어줌. id도 지워도 되는데 ide에서 빨간줄이 생겨서-->
        </div>
...
</form>

 

html의 checkbox는 체크를 하지않으면 null이 되는 문제 발생. 체크를 하지않으면 아예 데이터를 넘기지 않음. 수정의 경우에 체크박스를 해제하고 넘기면 아무런 값을 넘기지 않기 때문에 수정이 되지 않을 수 있다.

<div>
	<div class="form-check">
		<input type="checkbox" id="open" name="open" class="form-check-input">
		<input type="hidden" name="_open" value="on"> <!--히든 필드 추가-->
        <!--기존 체크 박스 이름 앞에 '_'를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다.-->
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

체크를 해제한 경우 _open만 전송되는데, 이 경우 스프링 MVC는 _open만 있는 것을 확인하 체크를 해제했다고 판단한다. 그러면 null이 아니라 False로 찍힌다.

thymeleaf에서

<div>
	<div class="form-check">
		<input type="checkbox" id="open" name="open" th:field="*{open}" class="form-check-input">
		<label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

th:field="*{open}"을 추가하면 thymeleaf에서 _open 자동생성. 위와 동일한 결과!

 

@ModelAttribute("regions")
    public Map<String, String> regions() {
        Map<String, String> regions = new LinkedHashMap<>(); //순서대로 들어가라고
        regions.put("SEOUL", "서울");
        regions.put("BUSAN", "부산");
        regions.put("JEJU", "제주");
        return regions;
    }

위의 regions가 모든 페이지마다 반복되어야 하는 경우 @ModelAttribute를 통해 모든 페이지에서 반복되게 할 수 있다.

th:for="${#ids.prev('regions')}"
멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 
생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다. 따라서 타임리프는 체크박스를 each
루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여준다.

th:field -> item의 field. th:value -> 값을 뿌릴 것

<!-- SELECT -->
<div>
	<div>배송 방식</div>
    <select th:field="*{deliveryCode}" class="form-select">
        <option value="">==배송 방식 선택==</option>
        <option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"
                            th:text="${deliveryCode.displayName}">FAST</option>
    </select>
</div>