Understanding Forms and Changesets - Revision history

Admin at 21:42, 23 March 2025

2025-03-23T21:42:06Z

← Older revision		Revision as of 21:42, 23 March 2025
Line 620:		Line 620:

	This pattern is consistent across nearly all LiveView forms in Phoenix - master this flow and you'll be able to handle virtually any form scenario.		This pattern is consistent across nearly all LiveView forms in Phoenix - master this flow and you'll be able to handle virtually any form scenario.



			=== Same Code with Simple_Form ===

			<source>
			defmodule AppWeb.SandLive do
			use AppWeb, :live_view

			alias App.Todos
			alias App.Todos.Todo

			def mount(_params, _session, socket) do
			changeset = Todos.change_todo(%Todo{})
			{:ok, assign(socket, form: to_form(changeset))}
			end

			def render(assigns) do
			~H"""
			<div>
			<.simple_form for={@form} phx-change="validate" phx-submit="save">
			<.input field={@form[:name]} type="text" label="Name" />
			<:actions>
			<.button>SAVE</.button>
			</:actions>
			</.simple_form>

			</div>
			"""
			end

			def handle_event("validate", %{"todo" => todo_params}, socket) do
			changeset =
			%Todo{}
			\|> Todos.change_todo(todo_params)
			\|> Map.put(:action, :validate)

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

			def handle_event("save", %{"todo" => todo_params}, socket) do
			case Todos.create_todo(todo_params) do
			{:ok, _todo} ->
			{:noreply,
			socket
			\|> put_flash(:info, "Todo created successfully.")
			\|> redirect(to: "/")}
			{:error, %Ecto.Changeset{} = changeset} ->
			{:noreply, assign(socket, form: to_form(changeset))}
			end
			end
			end
			</source>

Admin at 20:52, 23 March 2025

2025-03-23T20:52:13Z

← Older revision		Revision as of 20:52, 23 March 2025
Line 520:		Line 520:

	</source>		</source>





			______________________________________________________


			= Phoenix LiveView Forms & Changeset Tutorial =

			Here's a concise tutorial to help you learn and recall the syntax for Phoenix LiveView forms with Ecto changesets.

			== The Changeset Flow ==

			Think of the changeset as the "form manager" that follows this pattern:

			# '''Initialize''' - Create an empty changeset for the form
			# '''Validate''' - Update changeset when user types (phx-change)
			# '''Submit''' - Process final changeset when user submits (phx-submit)

			== Key Components ==

			=== 1. Initial Setup in Mount ===

			<syntaxhighlight lang="elixir">
			def mount(_params, _session, socket) do
			changeset = Todos.change_todo(%Todo{})
			{:ok, assign(socket, form: to_form(changeset), data: "some data")}
			end
			</syntaxhighlight>

			'''Memory Trick''': "Mount needs a blank changeset to start the form"

			=== 2. Rendering the Form ===

			<syntaxhighlight lang="elixir">
			<.form for={@form} phx-change="validate" phx-submit="save">
			<.input field={@form[:name]} type="text" label="Name" />
			<.button>SAVE</.button>
			</.form>
			</syntaxhighlight>

			'''Memory Trick''': "phx-change validates as you type, phx-submit saves when done"

			=== 3. Validation Handler ===

			<syntaxhighlight lang="elixir">
			def handle_event("validate", %{"todo" => todo_params}, socket) do
			changeset =
			%Todo{}
			\|> Todos.change_todo(todo_params)
			\|> Map.put(:action, :validate)

			{:noreply, assign(socket, form: to_form(changeset))}
			end
			</syntaxhighlight>

			'''Memory Tricks''':
			* "Validate always starts with an empty struct (%Todo{})"
			* "Map.put(:action, :validate) shows errors but doesn't save"

			=== 4. Save Handler ===

			<syntaxhighlight lang="elixir">
			def handle_event("save", %{"todo" => todo_params}, socket) do
			case Todos.create_todo(todo_params) do
			{:ok, _todo} ->
			{:noreply,
			socket
			\|> put_flash(:info, "Todo created successfully.")
			\|> redirect(to: "/")}

			{:error, %Ecto.Changeset{} = changeset} ->
			{:noreply, assign(socket, form: to_form(changeset))}
			end
			end
			</syntaxhighlight>

			'''Memory Trick''': "Save has two paths: success (redirect) or error (show form again)"

			== Changeset Flow Mnemonic: "CIVC" ==

			# '''C'''reate changeset in mount
			# '''I'''nput through the form
			# '''V'''alidate with phx-change
			# '''C'''omplete with phx-submit

			== Additional Tips ==

			* '''Pattern Matching''': Notice how form data comes in as <code>%{"todo" => todo_params}</code> - it's automatically namespaced by your schema.

			* '''The to_form Function''': Always convert changesets to forms with <code>to_form(changeset)</code> before passing to the template.

			* '''Empty vs. Populated Structs''':
			** Use empty <code>%Todo{}</code> for validation
			** Use populated struct for editing existing records

			* '''Error Handling''': On save failure, you just re-assign the form with the error changeset, and Phoenix shows the errors.

			This pattern is consistent across nearly all LiveView forms in Phoenix - master this flow and you'll be able to handle virtually any form scenario.

Admin at 18:32, 23 March 2025

2025-03-23T18:32:05Z

@@ Line 466: / Line 466: @@
      end
    end
 </source>

Admin at 03:34, 23 March 2025

2025-03-23T03:34:49Z

← Older revision		Revision as of 03:34, 23 March 2025
Line 380:		Line 380:


			</source>

			==Troubleshooting ChangeSets Example ==

			<source>
			defmodule AppWeb.SandLive do
			use AppWeb, :live_view

			alias App.Todos
			alias App.Todos.Todo

			def mount(_params, _session, socket) do
			# Create an empty changeset for the form
			changeset = Todos.change_todo(%Todo{})
			# Initialize debug_info to an empty map
			{:ok, assign(socket, data: "some data", changeset: changeset, debug_info: %{})}
			end

			def render(assigns) do
			~H"""
			<div>
			<.form :let={f} for={@changeset} phx-submit="save">
			<.input field={f[:name]} type="text" label="Name" />
			<.button>SAVE</.button>
			</.form>
			<p>{@data}</p>

			<%= if map_size(@debug_info) > 0 do %>
			<div class="mt-4">
			<h3 class="text-lg font-bold">Debug Info:</h3>
			<pre class="bg-gray-100 p-2 text-sm overflow-auto"><%= inspect(@debug_info, pretty: true) %></pre>
			</div>
			<% end %>
			</div>
			"""
			end

			def handle_event("save", %{"todo" => todo_params} = params, socket) do
			# Log the raw params first
			IO.inspect(params, label: "Raw form parameters")

			# Create a changeset without saving (for inspection)
			inspection_changeset = Todo.changeset(%Todo{}, todo_params)
			IO.inspect(inspection_changeset, label: "Changeset before save")

			# Note the cast fields
			IO.inspect(inspection_changeset.changes, label: "Fields that will change")

			# Note any errors that would occur
			IO.inspect(inspection_changeset.errors, label: "Validation errors")

			# Now proceed with the actual save
			result = Todos.create_todo(todo_params)

			case result do
			{:ok, todo} ->
			# Log the created record
			IO.inspect(todo, label: "Created todo")

			{:noreply,
			socket
			\|> assign(debug_info: %{
			raw_params: params,
			changeset: inspection_changeset,
			changes: inspection_changeset.changes,
			errors: inspection_changeset.errors,
			created_record: todo
			})
			\|> put_flash(:info, "User created successfully.")
			\|> redirect(to: "/sandbox")}

			{:error, changeset} ->
			# Log the error changeset
			IO.inspect(changeset, label: "Error changeset")

			{:noreply,
			socket
			\|> assign(changeset: changeset, debug_info: %{
			raw_params: params,
			error_changeset: changeset,
			errors: changeset.errors
			})
			\|> put_flash(:error, "Failed to create user.")}
			end
			end
			end
	</source>		</source>

Admin at 02:28, 23 March 2025

2025-03-23T02:28:03Z

← Older revision		Revision as of 02:28, 23 March 2025
Line 279:		Line 279:

	end		end
			</source>


			=== Same Example Without Changeset and With Flash Message ===

			<source>
			defmodule AppWeb.SandLive do
			use AppWeb, :live_view

			alias App.Todos
			alias App.Todos.Todo

			def mount(params,session,socket) do
			{:ok, assign(socket, data: "some data")}
			end

			def render(assigns) do

			~H"""
			<div>
			<.form :let={f} phx-submit="save">
			<.input field={f[:name]} type="text" label="Name" value="" />
			<.button>SAVE </.button>
			</.form>
			{@data}
			</div>

			"""
			end

			def handle_event("save", %{"name" => name} = params, socket) do
			IO.inspect params

			# Create todo without using a changeset directly
			result = Todos.create_todo(%{"name" => name})

			case result do
			{:ok, _todo} ->
			{:noreply, socket
			\|> put_flash(:info, "User created successfully.")
			\|> redirect(to: "/")}
			{:error, _reason} ->
			{:noreply, socket \|> put_flash(:error, "Failed to create user.")}
			end

			end


			end

	</source>		</source>

Admin at 22:07, 22 March 2025

2025-03-22T22:07:29Z

← Older revision		Revision as of 22:07, 22 March 2025
Line 279:		Line 279:

	end		end
			</source>

	===The Same Example with a Changeset ===		===The Same Example with a Changeset ===
Line 330:		Line 330:


	~~</source>~~
	</source>		</source>

Admin at 22:06, 22 March 2025

2025-03-22T22:06:59Z

← Older revision		Revision as of 22:06, 22 March 2025
Line 234:		Line 234:

	https://adopt-liveview.lubien.dev/guides/simple-forms-with-ecto/en		https://adopt-liveview.lubien.dev/guides/simple-forms-with-ecto/en




			===A Working Form Without Changesets ===

			<source>
			defmodule AppWeb.SandLive do
			use AppWeb, :live_view

			alias App.Todos
			alias App.Todos.Todo

			def mount(params,session,socket) do

			{:ok, assign(socket, data: "some data")}
			end

			def render(assigns) do

			~H"""
			<div>
			<.form :let={f} phx-submit="save">
			<.input field={f[:name]} type="text" label="Name" value="" />
			<.button>SAVE </.button>

			</.form>

			{@data}

			</div>

			"""

			end


			def handle_event("save",params, socket) do
			IO.inspect params

			{:noreply, socket}
			end


			end


			===The Same Example with a Changeset ===


			<source>


			defmodule AppWeb.PageLive do
			use AppWeb, :live_view

			alias App.Todos
			alias App.Todos.Todo

			def mount(_params, _session, socket) do
			changeset = Todos.change_todo(%Todo{})
			{:ok, assign(socket, changeset: changeset)}
			end

			def render(assigns) do
			~H"""
			<h1>Create User</h1>
			<.form :let={f} for={@changeset} phx-submit="save">
			<div>
			<.input field={f[:name]} type="text" label="Name" />
			</div>
			<div>
			<.button>Save</.button>
			</div>
			</.form>
			"""
			end

			def handle_event("save", %{"todo" => todo_params}, socket) do

			result = Todos.create_todo(todo_params)
			IO.inspect result

			case Todos.create_todo(todo_params) do
			{:ok, _todo} ->
			{:noreply, socket
			\|> put_flash(:info, "User created successfully.")
			\|> redirect(to: "/")}

			{:error, %Ecto.Changeset{} = changeset} ->
			{:noreply, assign(socket, changeset: changeset)}
			end
			end
			end


			</source>
			</source>

Admin at 14:08, 19 March 2025

2025-03-19T14:08:13Z

← Older revision		Revision as of 14:08, 19 March 2025
Line 230:		Line 230:
	end		end
	</source>		</source>



			https://adopt-liveview.lubien.dev/guides/simple-forms-with-ecto/en

Admin at 00:50, 19 March 2025

2025-03-19T00:50:38Z

← Older revision		Revision as of 00:50, 19 March 2025
Line 139:		Line 139:

	Changesets solve both of these problems.		Changesets solve both of these problems.



			==Schema and Live View Form==

			===Schema===

			<source>
			defmodule App.Todo do
			use Ecto.Schema
			import Ecto.Changeset

			schema "todos" do
			field :description, :string
			field :title, :string

			timestamps(type: :utc_datetime)
			end

			@doc false
			def changeset(todo, attrs) do
			todo
			\|> cast(attrs, [:title, :description])
			\|> validate_required([:title, :description])
			end
			end

			</source>

			===Live View Form ===

			<source>
			defmodule AppWeb.PageLive do
			use AppWeb, :live_view
			alias App.Todo

			def mount(_params, _session, socket) do
			changeset = Todo.changeset(%Todo{}, %{})

			{:ok,
			socket
			\|> assign(:changeset, changeset)
			\|> assign(:todo, %Todo{})
			\|> assign(:saved, false)}
			end

			def handle_event("save", %{"todo" => todo_params}, socket) do
			case save_todo(todo_params) do
			{:ok, _todo} ->
			{:noreply,
			socket
			\|> assign(:changeset, Todo.changeset(%Todo{}, %{}))
			\|> assign(:saved, true)}

			{:error, %Ecto.Changeset{} = changeset} ->
			{:noreply, assign(socket, changeset: changeset, saved: false)}
			end
			end

			defp save_todo(todo_params) do
			%Todo{}
			\|> Todo.changeset(todo_params)
			\|> App.Repo.insert()
			end

			def render(assigns) do
			~H"""
			<.form :let={f} for={@changeset} phx-submit="save">
			<div>
			<.input field={f[:title]} type="text" label="Title" />
			</div>

			<div>
			<.input field={f[:description]} type="textarea" label="Description" />
			</div>

			<div>
			<.button>Save</.button>
			</div>
			</.form>

			<%= if @saved do %>
			<div class="alert alert-info">
			Todo saved successfully!
			</div>
			<% end %>
			"""
			end

			end
			</source>

Admin at 10:30, 29 December 2024

2024-12-29T10:30:48Z

← Older revision		Revision as of 10:30, 29 December 2024
Line 130:		Line 130:

	When you run the server and visit the landing page, you should see the page render without error.		When you run the server and visit the landing page, you should see the page render without error.


			===Form Changesets===
			Without Changesets we have these two problems:

			* We lose what we typed.
			* The app doesn’t tell us what our errors were.

			Changesets solve both of these problems.