[Thymeleaf] 문자열 나누기(arraySplit)

 

전화번호, 사무실번호, 팩스번호를 기존에 input text 한 칸 이던 것을

dash(-) 기준으로 세 칸으로 나눠서 입력받아 달라는 요구사항이 들어왔다.

 

프런트 단 템플릿 엔진은 타임리프.... 경험이 거의 전무하다..

 

각각 번호는 이렇게 들어가 있다.

 

1. 전화번호가 있으면 '-' 기준으로 input 칸이 세 칸으로 나뉘어야 한다.
2. 공백인 데이터 or null 값인 데이터라면 공란의 세칸이 보여야 한다.

 

타임리프 생 초짜가 창피하지만 코딩한 결과는 이렇다.

 

* 사무실 전화번호 기준

<th scope="row">사무실전화번호</th>
	<td th:if="${not #strings.isEmpty(user.office_phone)} ">
		<input id="office_phone" style="display:none;" type="text" th:field="*{office_phone}" title="사무실 전화번호를 입력해주세요"/>
		<input id = "office_phone1" style="width:30%" type="text" th:value="${#strings.arraySplit(user.office_phone,'-')[0]}" /> -
		<input id = "office_phone2" style="width:30%" type="text" th:value="${#strings.arraySplit(user.office_phone,'-')[1]}" /> -
		<input id = "office_phone3" style="width:30%" type="text" th:value="${#strings.arraySplit(user.office_phone,'-')[2]}" />
	</td>
	<td th:if="${user.office_phone == null or #strings.isEmpty(user.office_phone)}">
		<input style="display:none;" type="text" th:field="*{office_phone}" title="사무실 전화번호를 입력해주세요" />
		<input id = "office_phone1" style="width:30%" type="text" /> -
		<input id = "office_phone2" style="width:30%" type="text" /> -
		<input id = "office_phone3" style="width:30%" type="text" />
	</td>

 

 

* 결과

 

 

 

* 어려웠던 부분

1. 타임리프 null 체크 구문이 쉬우면서도 어려웠다....

<td th:if="${not #strings.isEmpty(user.office_phone)} ">
<td>

<td th:if="${logodiTeacher.office_phone == null or #strings.isEmpty(user.office_phone)}">
</td>