컬럼

input 타입의 mask 옵션

input 컬럼 타입은 사용자가 데이터를 입력할 때 일정한 형식을 유지하도록 도와주는 mask 옵션을 지원합니다.
이를 통해 다양한 입력 형태를 쉽게 설정할 수 있습니다.

Step 1: mask 옵션 설정

mask는 "input" 컬럼 타입에서 입력 형식을 미리 정의하는 기능입니다.
예제 설정: alias를 활용하여 입력 형식을 지정할 수 있습니다.

위 설정을 적용하면, 사용자는 999999-9999999 형태(예: 123456-7890123)로만 입력할 수 있습니다.

Step 2: mask의 alias 옵션 'currency'

alias : 'currency'설정

▪️ 숫자 데이터를 입력할 때, 자동으로 천 단위마다 콤마(,)를 추가하는 기능입니다.
▪️ 값이 편집(edit) 상태일 때 1,000,000처럼 천 단위 구분 기호가 자동 적용됩니다.

옵션	설명
prefix	데이터 앞에 특정 문자열을 표시 (예: prefix: "₩" → ₩1,000)
digits	소수점 이하 표시 자릿수를 설정 (예: digits: 2 → 1,000.00)

▪️ prefix : 'string'는 설정한 값을 edit 상태일 때 데이터 맨 앞에 표시해주며, 빈 값일 때는 표시하지 않습니다.
▪️ digits : number는 주어진 숫자 값에 따라 데이터 끝에 0을 필요한 만큼 추가하여 표시하며, 데이터에 소수점이 있는 경우 해당 소수점을 기준으로 0을 덧붙여 표시합니다.

📌 currency alias 예제

📌 예제 설명:

▪️ 사용자가 숫자를 입력하면, 자동으로 천 단위 구분 기호(,) 가 적용됩니다.
▪️ prefix: "₩" 설정으로 인해 ₩1,000.00처럼 값이 표시됩니다.
▪️ digits: 2 설정으로 인해 소수점 이하 두 자리까지 유지됩니다.

📌 입력 값 예시

Step 3: mask와 format 옵션을 함께 사용하기

📌 아래 예제: 가격2 컬럼 설정

mask: { alias: "currency" } → 입력 중일 때 천 단위 콤마 자동 추가
format: { type: "number", rule: "₩ #,###.##" } → 화면에 숫자 서식 적용
maxlength: 18 → 최대 입력 가능한 자리 수 제한

아래의 예제에서는 코드번호, 개인번호 컬럼도 format과 mask 옵션을 함께 적용하여 입력 방식을 제어합니다.
추가적인 예제 및 소스 코드 확인을 통해 동작 방식을 파악해 보세요.

화면에 보여주는 것을 돕는 format 옵션과 함께 사용한 또 다른 샘플도 참고해 보시길 바랍니다.(참고 샘플)