`NX.Form` — NexaForm

Name: NxCode IDE
Availability: InStock
Author: NxDOM

Alur form di NXDOM: NexaForm sebagai orchestrator, NexaFloating untuk render field dari definisi data, dan NexaValidation untuk validasi & pengumpulan nilai sebelum callback. Terkait input inline: NX.Field.

Alur belajar: skema field (§4) dan angka validation (§5) dulu. Form multi-langkah (wizard): ringkasan di §13; dokumentasi lengkap di NX.FormWizard — NexaWizard.

1. Akses API

NX.Form(…) — alias resmi (sama dengan NX.NexaForm)
import { NexaForm, collectFormData, … } from "…/Form/NexaForm.js" — dari modul lain

1.1 Global `nx` dan handler string

Setelah nxdom.js dieksekusi, window.nx adalah shorthand ke API Nexa (spread NX + properti internal), dibungkus Proxy sehingga nx.namaFungsi = function () { … } juga menyalin ke window[namaFungsi] untuk resolusi nama string.

Urutan resolusi onclick.send di NexaForm: window → NX → nx → nx._global.

JavaScript

nx.nexaFormDemoSubmit = async function (formId, formData, setDataBy) {
  console.log("[nexaFormDemoSubmit]", { formId, formData, setDataBy });
  const out = document.getElementById("nexaFormDemoOutput");
  if (out) {
    out.textContent = JSON.stringify({ formData, setDataBy }, null, 2);
  }
};

Setara: globalThis.nexaFormDemoSubmit = … atau window.nexaFormDemoSubmit = ….

2. Dua cara mengisi body form

Struktur: header (opsional) → body → footer + tombol jika onclick.send ada.

Urutan	Properti	Perilaku
1	`floating`	`NexaFloating` dari skema `form` + `variables`
2	`content`	HTML statis di body

Jangan pakai keduanya; floating menang jika ada, baru content.

2.1 Statik — `content`

Markup kustom; field punya id / name selaras dengan getFormBy / validasi.

2.2 Deklaratif — `floating`

Wajib minimal: form (objek field), variables (urutan nama field dengan condition: true). Sering: id / modalid, label, settings (floating, layout, validation, …).

2.3 Contoh — form statis + `content`

HTML

<div id="formStatis"></div>

JavaScript

const formDef = {
  judul: { condition: true, name: "judul", id: "judul", validation: 2 },
  email: { condition: true, name: "email", id: "email", validation: 2 },
};

globalThis.handleFormStatis = function (formId, formData, setDataBy) {
  console.log({ formId, formData, setDataBy });
};

await NX.Form({
  elementById: "formStatis",
  label: "Form statis",
  content: `
    <div style="display:flex;flex-direction:column;gap:0.75rem;max-width:24rem;">
      <input type="text" id="judul" name="judul" placeholder="Judul" />
      <input type="email" id="email" name="email" placeholder="email@contoh.com" />
    </div>
  `,
  onclick: {
    title: "Simpan",
    cancel: "Batal",
    send: "handleFormStatis",
    validation: {},
  },
  setDataBy: { form: formDef, mode: "demo" },
  getFormBy: ["name"],
  getValidationBy: ["name"],
});

2.4 Contoh — `floating`

JavaScript

const demoForm = {
  nama: {
    condition: true,
    type: "text",
    label: "Nama",
    placeholder: "Nama lengkap",
    name: "nama",
    id: "nama",
    validation: 2,
  },
  email: {
    condition: true,
    type: "email",
    label: "Email",
    placeholder: "email@contoh.com",
    name: "email",
    id: "email",
    validation: 2,
  },
  pesan: {
    condition: true,
    type: "text",
    label: "Pesan",
    placeholder: "Minimal 10 karakter",
    name: "pesan",
    id: "pesan",
    validation: 10,
  },
};

const floatingConfig = {
  id: "form_demo_nexa",
  label: "Form demo",
  variables: ["nama", "email", "pesan"],
  form: demoForm,
  settings: { floating: true, layout: "vertical" },
};

globalThis.handleFormFloating = function (formId, formData, setDataBy) {
  console.log({ formId, formData, setDataBy });
};

await NX.Form({
  elementById: "nexaFormDemo",
  label: "Form demo",
  floating: floatingConfig,
  onclick: {
    title: "Simpan",
    cancel: "Batal",
    send: "handleFormFloating",
    validation: {},
  },
  setDataBy: { form: demoForm, route: "/form" },
  getFormBy: ["name"],
  getValidationBy: ["name"],
});

Tipe textarea di NexaFloating mengikat NX.Editor; untuk pesan singkat pakai type: "text" atau pastikan Editor tersedia.

3. Konfigurasi `NexaForm(data)`

3.1 Wajib / umum

Properti	Keterangan
`elementById`	Id target DOM (default `"myForm"`); elemen harus sudah ada
`label`	Judul header `.nx-form-header`
`floating`	Objek NexaFloating
`content`	HTML statis jika tanpa `floating`
`footer`	HTML tambahan di kiri footer
`setDataBy`	Metadata + harus ada `form` untuk pipeline validasi bawaan
`storage`	Alternatif: `storage.form` jika tidak pakai `setDataBy.form`

3.2 Tombol & `onclick`

Properti	Keterangan
`onclick.send`	String nama fungsi (bukan referensi)
`onclick.title` / `cancel`	Teks tombol (default Save / Cancel)
`onclick.validation`	Objek truthy (termasuk `{}`) + `getValidationBy` → jalur NexaValidation

Signature handler:

JavaScript

async function namaHandler(formId, formData, setDataBy) {
  /* formId === elementById; formData dari Validation atau collectFormData */
}

3.3 `getFormBy` / `getValidationBy`

getFormBy — default ["id"]; cara baca key saat kumpulkan data
getValidationBy — default ["name"]; atribut untuk cocokkan rules NexaValidation
Jika onclick.validation truthy atau getValidationBy diset → Validation(), bukan collectFormData langsung

4. Skema field (`form`)

JavaScript

namaField: {
  condition: true,
  type: "text",
  label: "Label",
  placeholder: "…",
  name: "namaField",
  id: "namaField",
  validation: 2,
}

Urutan tampil: floating.variables. Field condition: true yang tidak ada di variables dapat tetap mengikuti perilaku getOrderedFields di NexaFloating.

5. Angka `validation` dan NexaValidation

2 atau "2" — wajib isi (required)
> 2 — panjang minimum (mis. 10 = minimal 10 karakter)
Array — rentang [minLength, maxLength] (sesuai implementasi NexaValidation)

6. Dua jalur saat klik Simpan

Dengan NexaValidation — onclick.validation truthy atau getValidationBy diset: submit via #submit-${formId}, Validation(…), formData = result.response.
Tanpa — collectFormData(formId, getFormBy) langsung; validasi manual di handler jika perlu.

7. `setDataBy.form` dan `storage.form`

Teks

Buckets = data?.storage?.form ?? data.setDataBy.form

Filter condition === true untuk rules. Beri setDataBy.form atau storage.form (boleh {}) agar tidak error. Satu objek form untuk floating.form dan setDataBy.form disarankan.

8. Ekspor tambahan dari NexaForm.js

Ekspor	Fungsi
`collectFormData(containerId, getFormBy)`	Kumpulkan data di dalam `#containerId`
`setupColorSync(containerId)`	Sinkron `type="color"` dengan input teks `…Value`
`fileToBinaryArray`	`File` → array byte

9. NexaFormKey

NX.NexaFormKey memfilter storage.form:

JavaScript

NexaFormKey.include(storage, ["key1", "key2"]);
NexaFormKey.exclude(storage, ["key1"]);

10. Contoh referensi di proyek

Route form → templates/form.js (floating + validasi + nx.nexaFormDemoSubmit)
Route wizard → templates/wizard.js (NX.FormWizard)
Modal: templates/modal.js — floating di body modal; wizard mengganti opsi ke wizard:

11. Checklist troubleshooting

send adalah string; fungsi ada di window / NX / nx
setDataBy.form selaras dengan field yang di-render
getFormBy / getValidationBy cocok dengan id vs name di DOM
Import modul harus mengembalikan JavaScript (bukan HTML 404)
textarea + NexaFloating butuh NX.Editor — pertimbangkan type: "text"

12. Alur ringkas

Konfigurasi: floating atau content + setDataBy.form
NexaForm membangun body (NexaFloating atau HTML statis) + footer tombol
Submit: cabang NexaValidation jika aktif, else collectFormData → handler string (nx / window)

13. Form Wizard (NexaWizard)

NexaWizard / NX.FormWizard memecah form panjang menjadi langkah; skema form sama dengan NexaFloating; tambahan settings.wizard. Buka halaman dokumentasi NexaWizard →

13.1 Kapan memakai Wizard

Situasi	Saran
Banyak field membingungkan	`fieldsPerStep` atau `steps` eksplisit
Progres visual	Wizard + indikator (`form-nexa-wizard-progress`)
Submit di modal multi-langkah	`NX.Modal({ wizard: { … } })` — submit lewat tombol Kirim di wizard

13.2 Topik di modul Wizard

Akses API, skema formData, settings.wizard, opsi konstruktor
Validasi per langkah, Enter, nexaFormSubmit, onSubmit, send
html(), render(), bindToDom()
Wizard di modal (NexaModalHtml)
CSS form/tombol, troubleshooting

13.3 Akses API

JavaScript

const w = new NX.FormWizard(schema, { mode: "insert", footer: true });
w.render(mount);

Rute demo umum: wizard → templates/wizard.js. Modal: nx.openWizardModalDemo('wizard1') dengan opsi wizard: (bukan floating:).

Berkas implementasi

assets/modules/Form/NexaForm.js, NexaFloating.js, NexaValidation.js, NexaFormKey.js; wizard: NexaWizard.js (alias NX.FormWizard).

Nxdom Framework

NX.Form — NexaForm

1. Akses API

1.1 Global nx dan handler string

2. Dua cara mengisi body form

2.1 Statik — content

2.2 Deklaratif — floating

2.3 Contoh — form statis + content

2.4 Contoh — floating

3. Konfigurasi NexaForm(data)

3.1 Wajib / umum

3.2 Tombol & onclick

3.3 getFormBy / getValidationBy

4. Skema field (form)

5. Angka validation dan NexaValidation

6. Dua jalur saat klik Simpan

7. setDataBy.form dan storage.form

8. Ekspor tambahan dari NexaForm.js

9. NexaFormKey

10. Contoh referensi di proyek

11. Checklist troubleshooting

12. Alur ringkas

13. Form Wizard (NexaWizard)

13.1 Kapan memakai Wizard

13.2 Topik di modul Wizard

13.3 Akses API

Berkas implementasi

`NX.Form` — NexaForm

1.1 Global `nx` dan handler string

2.1 Statik — `content`

2.2 Deklaratif — `floating`

2.3 Contoh — form statis + `content`

2.4 Contoh — `floating`

3. Konfigurasi `NexaForm(data)`

3.2 Tombol & `onclick`

3.3 `getFormBy` / `getValidationBy`

4. Skema field (`form`)

5. Angka `validation` dan NexaValidation

7. `setDataBy.form` dan `storage.form`