PaleWatcher

PaleWatcher

How do you handle mutually dependent form fields in LiveView forms?

Suppose you have two fields in a Phoenix LiveView form where both are user-editable, and each one can be used to calculate the other.

Example:

A → derive B
B → derive A

Both inputs are valid entry points for the user.

The problem is that phx-change submits the entire form on every input change.

Once the form is submitted, the changeset receives both values at the same time and no longer knows which field was the actual user input and which one should be treated as the derived value.

A few obvious approaches seem problematic:

  • always prioritizing one field breaks UX
  • relying on changed? can be unreliable because both fields may appear changed after recalculation
  • moving logic outside the changeset makes validation and calculation harder to keep consistent

What is considered the idiomatic Phoenix/Ecto approach for this kind of bidirectional dependency?

How do you usually preserve which field was the real user input when the whole form is submitted on every change?

Most Liked

NobbZ

NobbZ

Can’t you check _target?

LostKobrakai

LostKobrakai

You can use the _target to see which field triggered the event.

Last Post!

LostKobrakai

LostKobrakai

https://medium.com/very-big-things/towards-maintainable-elixir-the-core-and-the-interface-c267f0da43

Given the distinction made in that blogpost the logic belongs very much in the interface, not the core. This specific form in question is concerned with that auto calculation, but the next one might not be. I‘d expext the core just needs data to be aligned by whatever means most useful depending on the source for the data.

Both core and interface might still use changesets though.

Where Next?

Popular in Questions Top

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
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
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
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
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
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

Other popular topics Top

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
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
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
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

We're in Beta

About us Mission Statement