2.타임리프-스프링 통합과 폼

<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="이름을 입력하세요">
    </div>

• th:object : 커맨드 객체를 지정한다
• th:field : HTML 태그의 속성을 자동으로 처리한다.

 

체크 박스 - 단일

        <!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" th:field="*{open}" name="open" class="form-check-input">
<!--                <input type="hidden" name="_open" value="on"/> &lt;!&ndash; 히든 필드 추가&ndash;&gt;-->
                <label for="open" class="form-check-label">판매 오픈</label>
            </div>
        </div>

• th:field 없이 히든 필드 추가
• th:field="*{open}"
• 체크 박스 체크 : open=on&_open=on
• 체크 박스 미체크 : _open=on

 

체크 박스 - 멀티

@ModelAttribute 의 사용법

컨트롤러의 @ModelAttribute는 별도의 메서드로 적용할 수 있다.

@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes(){
    List<DeliveryCode> deliveryCodes = new ArrayList<>();
    deliveryCodes.add(new DeliveryCode("FAST","빠른 배송"));
    deliveryCodes.add(new DeliveryCode("NORMAL","일반 배송"));
    deliveryCodes.add(new DeliveryCode("SLOW","느린 배송"));
    return deliveryCodes;
}

반환값인 deliveryCodes가 자동으로 model에 담기게 된다.

(각각의 컨트롤러 메서드에서 모델에 직접 담아 사용해도 된다)

th:for="${#ids.prev('regions')}"

name 값은 같아도 되지만 id값은 달라야해서 타임 리프는 아이디값을 인식하여 임의로 1,2,3을 붙여준다

 

<!-- multi checkbox -->
<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline">
        <input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
        <label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

타임리프 HTML 생성 결과

        <!-- multi checkbox -->
        <div>
            <div>등록 지역</div>
            <div class="form-check form-check-inline">
                <input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions"><input type="hidden" name="_regions" value="on"/>
                <label for="regions1" class="form-check-label">서울</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions"><input type="hidden" name="_regions" value="on"/>
                <label for="regions2" class="form-check-label">부산</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions"><input type="hidden" name="_regions" value="on"/>
                <label for="regions3" class="form-check-label">제주</label>
            </div>
        </div>

regions1,regions2,regions3에 맞추어 순서대로 입력된 것을 알 수 있다.

<!-- multi checkbox -->
<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline">
        <input type="checkbox" th:field="${item.regions}" th:value="${region.key}" class="form-check-input" disabled>
        <label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

th:object가 없으면 ${item.regions} 이용

 

라디오 버튼

하나만 선택할 수 있으며, 이미 선택되어 있다면 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든 필드를 사용할 필요가 없다.

 

셀렉트 박스 체크박스와 또한 동일