submitButton disabledFn 기능 안내

submitButton disabledFn

특정 조건에 따라 제출 버튼을 비활성화, 활성화할 수 있습니다.

사용 사례별 설명

[1개 이상의 폼 에러로 submit 막는 방법]

  • param 중 하나라도 invalid하면 submit button이 disabled

[개별 폼에러가 아닌 전체 폼 검증으로 submit 막는 방법]

  • params invalid 상태가 아닌 경우 (사용 안 하는 경우)
  • block.submitButton.disabledFn 또는 block.disabledFn 지정하면, 해당 로직에 따라 disabled 됩니다.

return true → 비활성화됨
return ‘메시지’ → 비활성화됨 (버튼에 tooltip 표시)
return false → 활성화

예제 YAML

- path: pages/FHeCzm
  title: 제목
  subtitle: 내용
  # params:
  #   - key: project
  #     # validateFn: |
  #     #   return 'dddd'
  # submitButton: 
  #   disabledFn: |
  #     const project = params.find(e => e.key == 'project')
  #     if (project.value.length < 3) {
  #       return '이름을 입력해주세요.'
  #     }

  #     return false

  blocks:
  - type: query
    resource: mysql.qa
    # sqlType: select
    sqlType: update
    sql: >
      SELECT 1
    params:
      - key: name
        # validateFn: |
        #   return 'dddd'
    resetButton: 
      label: gogo
    submitButton: 
      disabledFn: |
        const name = params.find(e => e.key == 'name')
        if (name.value.length < 3) {
          // return '이름을 입력해주세요.'
          return true
        }

        return false

관련하여 도움이 필요하시면 문의주시기 바랍니다.
감사합니다.