LiveView Form & Validasi Real-Time

Penjelasan

LiveView menyediakan komponen <.form> yang bekerja bersama helper to_form/2 untuk mengubah changeset menjadi struct form yang bisa dirender. Dengan menambahkan atribut phx-change pada form, setiap kali user mengetik, event akan dikirim ke server untuk memvalidasi ulang changeset secara real-time tanpa reload halaman, sehingga error langsung muncul di bawah input yang salah. Saat form disubmit dengan phx-submit, event terpisah dijalankan untuk benar-benar menyimpan data ke database lewat context. Pola umum adalah: handle_event("validate", ...) memakai Ecto.Changeset.apply_action atau hanya validasi tanpa insert, sedangkan handle_event("save", ...) baru memanggil Repo.insert lewat context.

Contoh Konsep

def mount(_params, _session, socket) do
  changeset = TokoApp.Catalog.change_produk(%TokoApp.Catalog.Produk{})
  {:ok, assign(socket, form: to_form(changeset))}
end

def render(assigns) do
  ~H"""
  <.form for={@form} phx-change="validate" phx-submit="save">
    <.input field={@form[:nama]} label="Nama" />
    <.input field={@form[:harga]} label="Harga" type="number" />
    <button type="submit">Simpan</button>
  </.form>
  """
end

def handle_event("validate", %{"produk" => params}, socket) do
  changeset =
    %TokoApp.Catalog.Produk{}
    |> TokoApp.Catalog.Produk.changeset(params)
    |> Map.put(:action, :validate)

  {:noreply, assign(socket, form: to_form(changeset))}
end

Praktikum

Lengkapi handle_event save untuk memanggil BlogApp.Content.create_artikel dan menampilkan pesan sukses jika berhasil.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Gunakan komponen <.input> bawaan core_components.ex agar error changeset otomatis ditampilkan tanpa perlu menulis markup error manual.