Skip to main content

​
Basic form

method: POST, params, display: form 
blocks:
  - type: http
    method: POST
    fetchFn: 
    params:
      - key: name
      - key: memo
    display: form

​
Set input format

params.format 
params:
  - key: memo
    format: textarea

​
Group and styling form

params.group, params.style, formOptions 
params:
  - key: name
    group: 1
  - key: is_guest
    group: 1
  - key: phone
    style:
      width: 100%
  - key: email
display: form
formOptions:
  firstLabelWidth: 120px
  labelWidth: 100px

​
Validate input

params.validateFn 브라우저 단에서 입력값을 검증(validate)합니다. 데이터를 입력할때 가이드 역할을 합니다. 
params:
  - key: email
    validateFn: |
      const value = param.value?.trim()
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

      if (!value) {
        return '필수 입력 항목'
      }
      if (!emailRegex.test(value)) {
        return '이메일 형식이 아님'
      }
      return '';

​
Disable button by condition

submitButton.disabledFn 입력 값이 조건에 알맞지 않을때 제출 버튼을 비활성화할 수 있습니다. 
params:
  - key: email
display: form
submitButton: 
  disabledFn: |
    const email = params.find(e => e.key == 'email')
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

    if (!email.value || !emailRegex.test(email.value.trim())) {
      return true
    }
    return false