NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

SelectList — dropdown dengan validasi

Komponen SelectList dari NexaJS menampilkan daftar pilihan dapat dicari; nilai diproyeksikan lewat setSelected dan biasanya dihubungkan ke useFormValidation seperti field teks. Data berbentuk array { key, value }; opsi save="key" menyimpan kunci ringkas (mis. kode provinsi) ke state formulir.

Alur penggunaan di aplikasi

  1. Navigator — Pada template bawaan, modul demo belum selalu terdaftar di MenuComponents. Tambahkan entri route sendiri atau tanamkan SelectList di dalam layar formulir. MenuComponents.
  2. Validasi — handleChange / handleBlur dari useFormValidation; tampilkan errors.* setelah touched.

Cuplikan cepat

import { View, Text, StyleSheet, SelectList, useFormValidation } from "NexaJS"; const genderData = [ { key: "L", value: "Laki-laki" }, { key: "P", value: "Perempuan" }, ]; const { values, errors, touched, handleChange, handleBlur, isValid } = useFormValidation( { gender: "" }, { gender: { type: "text", placeholder: "Jenis Kelamin", length: [1, 1] } } ); <SelectList setSelected={(val) => handleChange("gender", val)} data={genderData} placeholder="Pilih Jenis Kelamin" label="Jenis Kelamin" searchPlaceholder="Cari..." save="key" onBlur={() => handleBlur("gender")} /> {touched.gender && errors.gender ? ( <Text style={{ color: "red", fontSize: 12 }}>{errors.gender}</Text> ) : null}

Properti yang dipakai di demo

  • data, placeholder, label, searchPlaceholder.
  • save — "key" agar state berisi key, bukan teks panjang.
  • txColor opsional untuk warna teks.
  • setSelected — callback dengan nilai terpilih.

Praktik yang disarankan

  • Samakan panjang length pada aturan validasi dengan format key (1 karakter vs 2 digit kode).
  • Untuk daftar besar, pertahankan pencarian; pertimbangkan paginasi sisi server jika data dari API.