Skip to content

Conversation

@FKubisSWM
Copy link
Contributor

From README:

The demo form is build as a html page with a single form and a rendered list of users (usernames and emails).
List of users is stored in local live view process memory.
The form handles onchange and onsubmit LocalLiveView events.
The change event triggers validate function that looks through already saved users and makes sure that
new username or email isn't already present in the users list. The submit event add a new user to the user list.

@FKubisSWM FKubisSWM requested a review from mat-hek November 25, 2025 16:09
@FKubisSWM FKubisSWM linked an issue Nov 27, 2025 that may be closed by this pull request
Copy link
Contributor

@mat-hek mat-hek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • fix the error in mix setup
  • configure CI

List of users is stored in local live view process memory.
The form handles onchange and onsubmit LocalLiveView events.
The change event triggers validate function that looks through already saved users and makes sure that
new username or email isn't already present in the users list. The submit event add a new user to the user list.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
new username or email isn't already present in the users list. The submit event add a new user to the user list.
new username or email isn't already present in the users list. The submit event adds a new user to the user list.


The demo project implementing phoenix forms using LocalLiveView.

The demo form is build as a html page with a single form and a rendered list of users (usernames and emails).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The demo form is build as a html page with a single form and a rendered list of users (usernames and emails).
The demo form is built as an html page with a single form and a rendered list of users (usernames and emails).

@@ -0,0 +1,35 @@
# FormDemo
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# FormDemo
# Local Live View Form Demo

use LocalLiveView
import Local.CoreComponents

def render(assigns) do
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
def render(assigns) do
@impl true
def render(assigns) do

same for other callbacks

Comment on lines +57 to +65
|> Enum.reduce(%{}, fn {k, v}, acc ->
in_existing_users = Enum.any?(existing_users, fn u -> Map.get(u, k) == v end)
Map.put(acc, k, in_existing_users)
end)

Enum.reduce(result, "", fn
{k, true}, acc -> acc <> "#{to_string(k)} already in use! "
{_k, false}, acc -> acc
end)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
|> Enum.reduce(%{}, fn {k, v}, acc ->
in_existing_users = Enum.any?(existing_users, fn u -> Map.get(u, k) == v end)
Map.put(acc, k, in_existing_users)
end)
Enum.reduce(result, "", fn
{k, true}, acc -> acc <> "#{to_string(k)} already in use! "
{_k, false}, acc -> acc
end)
|> Enum.filter(fn {key, value} ->
Enum.any?(existing_users, fn user -> Map.get(user, key) == value end)
end)
|> Enum.map_join(", ", fn {key, _value} ->
String.capitalize("#{key} already in use")
end)

Comment on lines +4 to +7
{js_event: "click", pop_event: "pop-click"},
{js_event: "keydown", pop_event: "pop-keydown"},
{js_event: "submit", pop_event: "pop-submit"},
{js_event: "input", pop_event: "pop-change"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How hard would it be to support more events?

<label>EMAIL</label>
<.input type="email" field={@form[:email]} />
<div class="centered">
<button class="ghost-button">SAVE</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we easily disable the button when validation doesn't pass?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

LocalLiveView forms demo

3 participants