FeeJai
How does LiveView keep track of which forms fields have been altered?
I am currently building a form that contains an input type=date and a select which allows users to chose a location. Depending on the location, the time zone changes and with it the allowed date range.
To validate, I have used Ecto.Changeset.cast({data, types}, params, Map.keys(types)) which uses a custom validator to check the permitted date range. Then I add Map.put(:action, :validate).
Unfortunately after the time zone changes LiveView does not show the errors on my input type=date, until I manually click the date selector element. This is most likely a feature that validation is not shown until a user has edited an input field, however in my case this behaviour would be desired. It does not seem that the changeset is different after I click into the date field, so this seems to be tracked somewhere else in LiveView. How can I instruct liveview to show the errors for this field in the changeset?
EDIT: I found the mechanism using the phx-feedback-for-hook and the phx-no-feedback-class as documented on the Form bindings page. My workaround now is to not use the core component, but just past the content avoiding the phx-feedback-for. Not a nice solution though. How could this be done properly?
Most Liked
FeeJai
Thank you. I added a patch to my core components and have now found the time to write a pull request: Add eager errors option to core component input fields by FeeJai · Pull Request #5514 · phoenixframework/phoenix · GitHub
codeanpeace
def error(assigns) do ~H""" <p class="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> """ endNow, any DOM container with the
phx-feedback-forattribute will receive aphx-no-feedbackclass in cases where the form fields has yet to receive user input/focus. Using new CSS rules or tailwindcss variants allows you errors to be shown, hidden, and styled as feedback changes.
Based off the docs, you could also create a separate error component e.g. .eager_error that doesn’t use the :hidden tailwind variant appended to the phx-no-feedback LiveView class.
Another potential approach would be to add a label that conveys the permitted date range based on the chosen location. That way error handling for the date input can stay consistent with the other inputs.
And just for reference, here’s the logic for the phx-feedback-for class.
https://github.com/phoenixframework/phoenix_live_view/blob/ee515ccb06da284e49b9c5e60325deed79d09d82/priv/static/phoenix_live_view.js#L543-L552
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








