본문으로 건너뛰기

Cascade Select

Cascade Select은(는) 계층형 옵션에서 경로를 단계별로 선택합니다. 이 필드는 Form의 상태, 검증 및 제출 범위에 포함됩니다.

1. 사용 시점​

일반적인 용도:

  • 국가, 지역 및 도시
  • 상품 분류 경로
  • 업무 도메인과 하위 도메인

2. 추가 및 구성​

  1. Form Section의 Fields 영역에 Cascade Select을(를) 추가합니다.
  2. 백엔드 DTO 속성과 일치하는 안정적이고 고유한 Field Key / Name을 설정합니다.
  3. 아래의 컴포넌트 속성을 구성하고 필요에 따라 Required, Help Text, Full row 또는 조건식을 추가합니다.
  4. Design Preview에서 초기값과 레이아웃을 확인한 다음 Form Validate / Submit으로 전체 데이터 경로를 테스트합니다.

3. 주요 속성​

속성역할
Options선택 데이터의 원본과 매핑 방식을 정의합니다.
Model Relation Data Source선택 데이터의 원본과 매핑 방식을 정의합니다.
Enable Search이 동작을 켜거나 끕니다.
Parent Selectable이 동작을 켜거나 끕니다.
Required이 동작을 켜거나 끕니다.

Field Key, Required, Help Text, Full row, Visible When 같은 공통 속성은 Form 필드 계약에서 제공합니다. 표에는 Cascade Select에 특히 중요한 설정을 정리했습니다.

4. Form 값과 백엔드 계약​

제출 값: 루트에서 선택한 리프까지의 옵션 값 배열입니다.

["canada", "ontario", "toronto"]

예시는 데이터 형태만 보여 줍니다. API는 업무 DTO에 따라 형식, 범위 및 권한을 계속 검증해야 합니다.

5. 검증, 조건 및 인터랙션​

모든 필드에서 Required, Visible When, Disabled When, Required When, Dependencies, Clear When Hidden을 사용할 수 있습니다. 조건식은 사용성을 높이지만 백엔드 검증이나 권한을 대체하지 않습니다.

컴포넌트 기능: onChange를 지원하여 선택 변경 후 Page Interaction을 이어갈 수 있습니다.

6. 구성 권장 사항​

권장 사항: 옵션 값은 백엔드 enum 또는 ID로 안정적으로 유지하고 번역 가능한 라벨을 업무 키로 사용하지 마세요.

레이아웃, 검증, 제출, 초안 및 백엔드 프로토콜은 Form 개요를 참고하세요.