komlanvi
LiveView phx-change attribute does not emit event on input text
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 text change. So I added phx-change attribute on every input (I only have text, email and password field) but it does not emit any event when the text of any of my input field change. Strangely It emits an event when instead of phx-change I use phx-click. Am I adding the wrong attribute?
On React I used to add onChange={myCallback} attribute on text input, is there something similar? I checked phoenix_live_view.js doc but can’t find a solution. Could someone help me?
Trending in Questions
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
Using Phoenix.LiveView.TagEngine as an EEx.Engine is deprecated!
To compile HEEx, use Phoenix.LiveView.TagEngine.compile/2 instead.
Sta...
New
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app?
Looking for hints regarding:
Addi...
New
Hi all, I wanted to ask how the community is dealing with post-release steps.
Today we have Ecto migrations, which make sure that the db...
New
I am using Oban and occasionally, shortly after a deployment, a handful of jobs can fail because of dependency on other parts of the syst...
New
Hello,
I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New
Other Trending Topics
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve.
They are GUI (Emerge) and State management (S...
New
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New
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
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #performance










First 10 of 33 Posts
chrismccord
Today we require the phx-change to be on the parent form, not individual inputs
komlanvi
Thank you for the reply. Is this a design choice or it will probably be added in a near future?
chrismccord
At the moment I’m not planning on making it per input because you can get what you want with the form events, and every event will have all the form input so it’s generally a better approach.
OvermindDL1
Doesn’t that mean you can’t quite as easily have composible form elements? Instead you’ll need to compose everything manually in code for each given form and all possible fields that it might dynamically have. In Drab I just use a drab child commander to add those and it is all very compartmentalized, so this would be a very useful feature in liveview.
chrismccord
I need to see concrete use cases first before settling on a broader API. Having the top-level form control its input is preferred because it’s generally what you want event wise, where a single change event provides the current client form state. More critically, it also allows us to more easily control the loading/disabled/patch states of form events where ad-hoc components make this more difficult, and open up race conditions to a programmer concern instead of library concern. For example, LV can lock the form or defer patches to the form before a server acknowledgement from the pushed form event, where ad-hoc inputs would not. So my current preference is to nail down the loading state and deferred patch handling at the form level and see if we need to go further from that base.
OvermindDL1
My initial thought is an autocomplete input, I want the input code to handle that, not the form itself as it doesn’t care, and adding that to every form’s handler just in the off chance the autocomplete version is used in the HTML is extra mental bandwidth to handle, plus however many other plugins the overall system will include over time. The autocomplete input is the precise use that I use a drab submodule for. In HTML all I have to do is craft an html element with special
drab-*attributes and it auto-registers and hooks in the child commander, which uses the information in the attributes to know which autocomplete list to pull from (which can even push updates in real time without typing changes if the autocomplete list has backend changes).Owens
Why can’t you just use phx-keyup for individual form elements? That’s what I’m using and it works great.
OvermindDL1
You can, but you still have to tie it into the backend somehow, the frontend is not the issue. ^.^
Owens
phx-keyup will pass the value of the input to the handle_event function which you can use to return the autocomplete options. Is that what you are trying to do?
OvermindDL1
Not me, I’m referencing putting in pre-built blocks into a page. For example, drab allows you to do something like
<div drab-commander="MyCommander">...</div>and the div and everything in it is controlled by an entirely different commander (like a liveview socket) rather than the main one, allowing you to break up functionality and re-use it in a trivial manner.Though perhaps you meant to reply to the OP rather than my post? ^.^;