라디오버튼, radio button

1. 라디오 버튼

---

• 라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있음

 

 

2. 라디오 버튼 추가

---

• 상품 종류
  • 도서, 식품, 기타
  • ENUM 사용

 

 

3. Controller

---

• @ModelAttribute("itemTypes") 사용
  • return되는 ItemType.values()를 model의 attribute에 추가함.
  • ItemType.values() -> ENUM의 모든 정보를 배열로 반환.

    @ModelAttribute("itemTypes")
    public ItemType[] itemTypes(){
       return  ItemType.values();
    }

 

 

4. addForm.html

---

• type.name() : enum의 name??
  
  • Returns the name of this enum constant, exactly as declared in its enum declaration
  • ENUM으로 선언한 String가져옴.
• type.description : enum의 description

        <!-- radio button -->
        <div>
            <div>상품 종류</div>
            <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
                <input type="radio" th:field="*{itemType}" th:value="${type.name()}"
                       class="form-check-input">
                <label th:for="${#ids.prev('itemType')}" th:text="${type.description}"
                       class="form-check-label">
                    BOOK
                </label>
            </div>
        </div>

• 랜더링 결과
  • 오 hidden field를 안만든다??
  • radio box는 체크가 되어있었다면, 수정시 무조건 한개는 check되어있음.
  • 따라서  수정시 check를 안해서 null이 넘어가는 것을 방지하기 위한 hidden 이 필요 없음.

        <!-- radio button -->
        <div>
            <div>상품 종류</div>
            <div class="form-check form-check-inline">
                <input type="radio" value="BOOK"
                       class="form-check-input" id="itemType1" name="itemType">
                <label for="itemType1" class="form-check-label">도서</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" value="FOOD"
                       class="form-check-input" id="itemType2" name="itemType">
                <label for="itemType2" class="form-check-label">음식</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" value="ETC"
                       class="form-check-input" id="itemType3" name="itemType">
                <label for="itemType3" class="form-check-label">기타</label>
            </div>
        </div

• 실행 결과

2021-09-23 23:15:07.187  INFO 29480 --- [nio-8080-exec-1] h.i.web.form.FormItemController
: item.open=true
2021-09-23 23:15:07.188  INFO 29480 --- [nio-8080-exec-1] h.i.web.form.FormItemController
: item.regions=[SEOUL, JEJU]
2021-09-23 23:15:07.188  INFO 29480 --- [nio-8080-exec-1] h.i.web.form.FormItemController
: item.itemType=BOOK

 

• editForm.html, item.html 도 적용

 

5. GitHub :210923 radio button

---

GitHub - bsh6463/Thymeleaf_Spring2