Errors aren't hidden on a form after creation

jason.o

I have an email input form that uses CoreComponent’s input and error components. When the page is first opened or refreshed (at which time, the email input box is naturally blank), the ‘is required’ error message is displayed for a second and then disappears. In the browser console, the phx-xxxxxx mount: is printed when the said error message disappears, which leads me to suspect that that’s when phx-no-feedback:hidden kicks in.

To solve this problem, I’ve been told that the initial changeset should not include validation, and it should be added in the event handlers. Since, in Ash, however, allow_nil? false is defined at the resource level, how is this supposed to be handled?

def error(assigns) do
    ~H"""
    <p class="mt-1 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
      <Heroicons.exclamation_circle mini class="mt-0.5 h-5 w-5 flex-none fill-rose-500" /> <%= render_slot(
        @inner_block
      ) %>
    </p>
 """
end

  def input(assigns) do
    ~H"""
    <div phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>

      <input
        type={@type}
        name={@name}
        id={@id || @name}
        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
        class={[
          "block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
          @border && "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
          @border && "border-zinc-300 focus:border-zinc-400",
          if(!@border, do: "border-0"),
          if(@strike_through, do: "line-through"),
          @errors != [] && "border-rose-400 focus:border-rose-400",
          @class
        ]}
        {@rest}
      />
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

4 comments

/ash #liveview #ash-phoenix

0 297 4

2024-04-23 17:42:20 UTC

First 4 of 4 Posts

zachdaniel

Creator of Ash

Can I see your mount function where you create the form?

Post #1

jason.o

apply_action is called from mount()

  defp apply_action(socket, default_date) do
    current_user = socket.assigns.current_user

    form =
      AshPhoenix.Form.for_create(Task, :create,
        api: Tasks,
        actor: socket.assigns.current_user,
        forms: [auto?: true]
      )

    form = AshPhoenix.Form.validate(form, %{"task_code" => default_suggested_task_code})
    

    form =
      form
      |> AshPhoenix.Form.add_form(:task_members)
      |> AshPhoenix.Form.add_form(:keydates)

    socket
    |> assign(:form, form)
  end

Post #2

zachdaniel

Creator of Ash

Right, so the validate call is turning the errors on. By default when you create a form errors are off. Try this:

  defp apply_action(socket, default_date) do
    current_user = socket.assigns.current_user

    form =
      AshPhoenix.Form.for_create(Task, :create,
        api: Tasks,
        actor: socket.assigns.current_user,
        forms: [auto?: true]
      )

    form = AshPhoenix.Form.validate(form, %{"task_code" => default_suggested_task_code}, errors: false)
    

    form =
      form
      |> AshPhoenix.Form.add_form(:task_members, validate_opts: [errors: false])
      |> AshPhoenix.Form.add_form(:keydates, validate_opts: [errors: false])

    socket
    |> assign(:form, form)
  end

Post #3