Show/Hide Field dengan trigger Dropdown

baca : Issue #1

Untuk issue ini baru bisa dicapai ketika menggunakan FormLowcode

1. Buat Formlowcode Base

import { AlurkerjaForm } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'

const Example = () => {
  const { formState, handleSubmit, control, setValue } = useForm()

  const baseUrl = 'https://kpm-sys.merapi.javan.id'
  const tableName = 'takwim'

  return(
    <AlurkerjaForm
      baseUrl={baseUrl}
      tableName={tableName}
      formState={formState}
      handleSubmit={handleSubmit}
      control={control}
      setValue={setValue}
    />
  )
}

2. Tambahkan attribute CustomField dan tambahkan kondisi dropdown yang menjadi trigger.

customField={({ field, setValue, defaultField }) => {
  if (field.name === 'status') {
    return (
      <>
        {defaultField}
      </>
    )
  }
  return defaultField
}}

3. Gunakan watch() dari react-hook-form untuk membaca value dari dropdown dan gunakan conditional rendering berdasarkan nilai watch tersebut

customField={({ field, setValue, defaultField }) => {
  if (field.name === 'status') {
    return (
      <>
        {defaultField}

        {watch('status') == 0 && <>Field1</> }
        {watch('status') == 1 && <>Field2</> }
      </>
    )
  }
  return defaultField
}}

Hasilnya

Feedback & Pertanyaan

Apabila ada pertanyaan atau feedback bisa comment di issue gitlab yang terlampir dan menghubungi developer terkait