FeeJai

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

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

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>
  """
end

Now, any DOM container with the phx-feedback-for attribute will receive a phx-no-feedback class 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

Where Next?

Popular in Questions Top

chokchit
** (DBConnection.ConnectionError) connection not available and request was dropped from queue after 2733ms. You can configure how long re...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement