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
LostKobrakai
Last Post!
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.
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









