Phoenix LiveView 表单提交,清除/重置输入值

我创建了我在 LiveView 组件中处理的这个简单表单。提交此表单后,社区清除/重置表单的最佳做法是什么?

我确实想考虑验证等。这是否总是通过 Ecto.Changeset,即使没有模式直接支持表单?

  def handle_event("add", %{"text" => text}, socket) do
    IO.inspect(text)
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <form phx-submit="add">
      <input type="text" name="text" placeholder="What needs to be done?" autofocus>
      <input type="submit" />
    </form>
    """
  end
stack overflow Phoenix LiveView form submit, clear/reset input value
原文答案

答案:

作者头像

LiveView 应该在提交后自动重置输入字段,但这可能是 Ecto 唯一的事情。如果你想清除输入,你也可以为此编写一个 JS 钩子。这很简单。

您始终可以使用 Flash 消息将用户重定向到某个地方以获得更好的用户体验。

作者头像

如果你想要 validation, using a changeset (Ecto) 可以给所有很多火力。 <.form> 会自动处理!