Image

Ngorei

framework v4.0.2

Network
Render
Komponen
Exsampel

Wizard Form

Form adalah komponen dasar untuk membuat formulir interaktif menggunakan framework Ngorei. Komponen ini menyediakan struktur baku dengan berbagai jenis input yang dapat disesuaikan sesuai kebutuhan aplikasi Anda.

Inisialisasi Framework

Form dinamis dengan berbagai jenis input. Form ini mencakup berbagai elemen seperti teks, password, email, dan banyak lagi, serta dilengkapi dengan pengaturan untuk tombol simpan dan batal.

const setTds=new Ngorei().From();
const Tds=setTds.Wizard({...});
const Tds=setTds.Wizard({
  framework: "ngorei",
  data: {
    steps: [
      {
        title: "Data Pribadi",
        fields: ["nama"]
      },
    ],
    defaultData:false,
    action: {
      nama:[
         "text", 12, 
         "Nama", 
         "Masukkan nama", 
         "left", 
         "fa fa-user", 
         6
      ],
     },
    footer: {
      save: ["Simpan", "success btn-sm bold"], 
      cancel: ["Batal", "outline-light btn-sm"],
      position: "right",
    },
  },
  width: "700px",
  formBackground: "#fff",
});

Konfigurasi From

Konfigurasi form menggunakan createForm memiliki beberapa parameter penting: framework untuk menentukan kerangka kerja yang digunakan, data untuk mengatur elemen input form (seperti tipe, panjang, label, placeholder), footer untuk mengatur tombol aksi form, width untuk lebar form, dan formBackground untuk warna latar belakang form.

Setup callbacks

let formInstance = null;
Tds.setCallbacks({
  onSubmit: async (data) => {
    try {
       console.log(data);
        const form = document.querySelector('form');
        form.reset();
        formInstance = Tds.mount("form-container");
        formInstance.resetForm();
    } catch (error) {
      console.error("Error :", error);
      alert("Terjadi kesalahan");
    }
  },
  onError: (error) => {
    console.error('Error:', error);
    alert('Terjadi kesalahan saat memproses form');
  }
});
Tds.mount("form-container");

Setup callbacks digunakan untuk menangani event-event yang terjadi pada form. Method setCallbacks menerima dua fungsi penting: onSubmit yang akan dijalankan ketika form berhasil disubmit dan onError