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
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
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call t...
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

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41989 114
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
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
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
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

Elixir Forum

We're in Beta

About us Mission Statement