Implementasi Form Kompleks

Form Kompleks disini conteks nya beragam, cuman yang paling gampang nya yaitu form yang layout nya abstract, input nya berlayer2 contoh ketika klik field muncul modal berisi form lagi, ada field yang depend ke field lain, dsb yang mana sulit untuk implementasiin form nya menggunakan FormLowcode

ada 2 opsi yang bisa dilakuakn

coding biasa dari nol, buat validasi, buat label, handle pesan error nya, contoh:

type ComplexFieldProps = {
  onChange?: (e: string) => void;
  defaultValue?: string;
};

export const ComplexField: React.FC<ComplexFieldProps> = ({ onChange, defaultValue }) => {
  return <input onChange={(e) => onChange?.(e.target.value)} defaultValue={defaultValue} />;
};

<div className="w-full lg:w-1/2">
  <label
    htmlFor="description"
    className="after:content-['*'] after:text-red-400 after:text-sm font-semibold"
  >
    Jenis Pengajuan
  </label>
  {revision ? (
    <Input value={watch("jenis_pengajuan")} disabled />
  ) : (
    <Controller
      name="jenis_pengajuan"
      control={control}
      rules={{ required: true }}
      render={({ field: { onChange } }) => (
        <ComplexField onChange={onChange} defaultValue={watch("jenis_pengajuan")} />
      )}
    />
  )}

  {errors["jenis_pengajuan"]?.type === "required" && (
    <span className="text-red-400 text-xs">Mohon isi bagian ini</span>
  )}
</div>

Menggunakan ReactHookWrapper yang mana bisa mempercepat pembuatan labeling & validasi, namun untuk layouting masih terbatas

import { ReactHookWrapper, Button,Input} from 'alurkerja-ui'
import { FieldValues, useForm } from 'react-hook-form'

export const ReactHookWrapperPage = () => {
    const { handleSubmit, control, setValue } = useForm()

    const onSubmit = (data: FieldValues) => {
        alert(JSON.stringify(data))
  }

    return(
        <ReactHookWrapper control={control}>
          <Input
            name="field_1"
            aria-label="Field 1"
            required
            onChange={(e) => setValue(e.target.name, e.target.value)}
          />
          <Input
            name="field_2"
            aria-label="Field 2"
            required
            onChange={(e) => setValue(e.target.name, e.target.value)}
          />
          <Input
            name="field_3"
            aria-label="Field 3"
            required
            onChange={(e) => setValue(e.target.name, e.target.value)}
            defaultValue={'sudah ad isinya'}
          />
        />
    )
}

cara kerja komponen ini yaitu, ReactHookWrapper akan melihat props masing2 childrennya contoh jika memiliki props aria-label maka munculkan label berdasarkan value tersebut sehinggal tidak perlu menuliskan <label>nama label</label> seperti ini, dan jika memiliki props required pun akan terdapat validasi tersebut ketika submit. ini akan selalu bekerja dengan component diluar alurkerja sekali pun asalakan nama props nya sama. misal

<ComplexField
  name="field_1"
  aria-label="Field 1"
  required
  onChange={(e) => setValue(e.target.name, e.target.value)}
/>

code diatas pun akan menghasilnya fungsi yang sama seperti menampilkan label nya, memiliki validasi required ketika submit

Kesimpulan

Alurkerja memberikan beberapa opsi dalam pembuatan form, tinggal disesuaikan yang sekira nya cocok dengan kebutuhannya dan bisa mempercepat pembuatan sebuah form

Implementasi Form Kompleks

Kesimpulan​

Kesimpulan