fix: changeset errors not working to form

config/config.exs

@@ -24,6 +24,10 @@ config :logger, :console,
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason
 
+config :surface, :components, [
+  {Surface.Components.Form.ErrorTag, default_translator: {MoonWeb.ErrorHelpers, :translate_error}}
+]
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env()}.exs"

lib/moon/components/field.ex

@@ -0,0 +1,17 @@
+defmodule Moon.Components.Field do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  prop(name, :string)
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <Surface.Components.Form.Field {=@name}>
+      <#slot />
+      <Surface.Components.Form.ErrorTag  />
+    </Surface.Components.Form.Field>
+    """
+  end
+end

lib/moon_web/pages/tutorials/add_data_using_form.ex

@@ -7,6 +7,7 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
   alias Moon.Components.CodePreview
   alias Moon.Components.FileInput
   alias Moon.Components.Form
+  alias Moon.Components.Field
   alias Moon.Components.Heading
   alias Moon.Components.Link
   alias Moon.Components.Select
@@ -18,6 +19,7 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
   alias MoonWeb.Components.Footer
   alias MoonWeb.Components.ThemesSelect
   alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
+  alias Surface.Components.Form.ErrorTag
 
   @default_user_map %{
     name: "",
@@ -89,7 +91,7 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
               <Select label="Gender" field="gender" options={@gender_options} prompt="Please select gender" />
               <FileInput conf={@uploads.file} label="Upload your ID" placeholder="Choose a document..." />
               <Button variant="fill" type="submit" full_width>Save</Button>
-              <Button variant="outline" on_click="clear_changeset_form">Cancel</Button>
+              <Button variant="outline" on_click="clear_form">Cancel</Button>
             </TopToDown>
           </Form>
         </:example>
@@ -114,7 +116,7 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
         <Select label="Gender" field="gender" options={@gender_options} prompt="Please select gender" />
         <FileInput conf={@uploads.file} label="Upload your ID" placeholder="Choose a document..." />
         <Button variant="fill" type="submit" full_width>Save</Button>
-        <Button variant="outline" on_click="clear_changeset_form">Cancel</Button>
+        <Button variant="outline" on_click="clear_form">Cancel</Button>
       </TopToDown>
     </Form>
     """
@@ -155,15 +157,11 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
     {:noreply, socket}
   end
 
-  def handle_event("clear_changeset_form", _, socket) do
+  def handle_event("clear_form", _, socket) do
     user_changeset = User.changeset(%User{}, @default_user_map)
     {:noreply, assign(socket, user_changeset: user_changeset)}
   end
 
-  def handle_event("clear_simple_form", _, socket) do
-    {:noreply, assign(socket, user_map: @default_user_map)}
-  end
-
   def handle_info({:hide_toast, toast_id}, socket) do
     ToastStack.hide_toast(toast_id, "toasts")
     {:noreply, socket}

lib/moon_web/pages/tutorials/add_data_using_form/user.ex

@@ -17,10 +17,12 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm.User do
   end
 
   def changeset(user = %User{}, params \\ %{}) do
-    user
+    user_changeset = user
     |> cast(params, @required_fields ++ @optional_fields)
     |> validate_required(@required_fields)
     |> validate_format(:email, ~r/@/)
     |> validate_inclusion(:gender, ["female", "male", "other"])
+
+    Map.merge(user_changeset, %{action: :insert})
   end
 end