sumbitButton이 params이 invalid 한 경우에 disabled 상태로 표시되지 않음

버그 리포트
1

아래와 같은 내용이 안내되어 있는데요.

submitButton disabledFn

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

사용 사례별 설명

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

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

param이 validateFn 에 의해 Invalid 함에도 submitButton이 바로 비활성화되지 않습니다.

modals → blocks 내부에서 params를 사용하고 있습니다.
같은 block 내에 submit button 입니다.

모달을 닫고 다시 열면 invalid 상태가 그대로 남아있고, submitButton은 disabled 상태로 있습니다.

image
image670×388 15.4 KB

1개의 좋아요
2

안녕하세요.

params validateFn 과 submitButton disabledFn은 별도로 동작합니다.

submitButton disabledFn 에서 params 조건을 설정했을때도 비활성화가 잘 안되고 계실까요?

꼭 params 에 validateFn을 써야하는 상황이시라면 코드와 함께 추가 공유 부탁드립니다.

감사합니다.

3

sumitButton의 disabledFn 은 따로 작성하지 않았습니다.

params 마다 있는 조건을 종합적으로 작성하면 되긴 한데, 아래 링크 드린 글에서
’1개 이상 폼에러가 있으면 submit button이 disabled 된다’ 라고 설명되어 있어서 sumitButton의 disabledFn을 명시하지 않으면 되는 줄 알았습니다.

하지만 이상한 점은, sumitButton의 disabledFn은 없음에도 특정 param이 validateFn에 의해 에러메세지가 노출될때 버튼이 비활성화 안되는데, 모달을 다시 열면 param이 validateFn에 의해 submit button이 비활성화 되어 있습니다.

코드도 공유드립니다.

modals:
  - path: edit-end_date-:pid
    name: 종료일 변경
    header: false
    mode: center
    height: 200px
    useColumn:
      - pid
      - name
      - start_at
      - end_at
    blocks:
      - type: query
        subtitle: |
          현재 종료일은 "{{ end_at }}" 입니다.
        resource: pt_prod
        sqlType: update
        sql: >
          {{생략}}
        sqlConfirm: true
        confirmText: |
          워크스페이스를 확인하세요!
          [[ {{name}} ]]
          변경하시겠습니까?
        reloadAfterSubmit: true
        display: form
        formOptions:
          firstLabelWidth: 100px
        submitButton:
          type: primary
          label: 변경하기
        params:
          - key: id
            valueFromRow: pid
          - key: start_at
            valueFromRow: start_at
          - key: end_at_umlimit
            required: true
            label: 종료일
            radio:
              - value: Y
                label: 무기한
              - value: N
                label: 종료일 지정
            radioButtonGroup: true
            defaultValue: N
            validateFn: |
              const end_at = params.find(e => e.key == 'end_at')
              if(param.value == 'Y'){
                end_at.disabled = true
                end_at.value = ''
              } else{
                end_at.disabled = false 
              }
              return true
          - key: end_at
            label: 날짜 선택
            format: date
            width: 180px
            disabled: false
            defaultValueFromRow: end_at
            validateFn: |
              if(param.value != ""){
                const startDate = new Date(params.find(e => e.key == 'start_at').value);
                const endDate = new Date(param.value);
                if (startDate > endDate) {
                  return '시작일보다 과거일 수 없습니다.'
                }
              }
              return true
1개의 좋아요
4

추가 말씀 감사합니다!

params validateFn 기능만 사용하신거군요.

submit button 비활성화 관련된 부분은 기술팀에 전달하여 확인해보겠습니다.

1개의 좋아요