Is there a way to manually set touched fields in a LiveView form?

Questions / Help
1

I’m passing a changeset with errors to a LiveView on mounting and I would like to show the errors. But the error is hidden since the error visibility is dependent on phx-no-feedback. So my question is, is there a way to manually set touched fields?

2

You could just remove the CSS hiding the element based on that class?

3

Change error_tag in error_helpers.ex (or create a new tag) to something like this:

  def error_tag(form, field, always_on \\ false) do
    Enum.map(Keyword.get_values(form.errors, field), fn error ->
      content_tag(:span, translate_error(error),
        class: "invalid-feedback",
        style: "#{if always_on, do: "display: block !important"}",
        phx_feedback_for: input_name(form, field)
      )
    end)
  end

Then you can use it like this:

    <%= label f, :body %>
    <%= textarea f, :body %>
    <%= error_tag f, :body, true %>
2 Likes
4

Thanks for the idea! I implemented something similar. But instead of explicitly indicating always_on, I created a helper to watch for form.source.action.

Here’s my helper:

def put_feedback_for(form, name) do
  if form.source.action == :insert,
    do: false,
    else: input_name(form, name)
end

Scenarios:

  1. If it’s a new form, :action will be nil.
  2. If it’s a pre-filled form, :action will be :insert.
  3. When phx-change validation gets triggered, :action will be set to :update.
1 Like
5

That could be one of the solutions. But I still need phx-no-feedback to work for new forms.

6

In that case you can e.g add a class to that form and show it just for that one: ‘form.show-errors .phx-no-feedback { display: block }’