Phx-change on input themselves

You can pattern match based on the input that triggered the phx-change action.

Example from the docs:

For example, if the following input triggered a change event:

<input name="user[username]"/>

The server’s handle_event/3 would receive a payload:

%{"_target" => ["user", "username"], "user" => %{"username" => "Name"}}

Then you can have the following callbacks defined:

def handle_event("phx_change_action", %{"_target" => ["user", "username"], "user" => %{"username" => username}}, socket) do
... handle logic when username is changed
end
def handle_event("phx_change_action", %{"_target" => ["user", "quantity"], "user" => %{"quantity" => quantity}}, socket) do
... handle logic when quantity is changed
end

…and so on…

You can achieve a per input change like this. The idea is that you are not forced into only one handle_event callback. You can achieve the level of granularity that you wish by simply pattern matching on the payload.

3 Likes