如何使用Phoenix LiveView处理表单

Question

我在凤凰城有一张表格，看起来像这样

<%= form_for @changeset, Routes.post_path(@conn, :create, @post), [method: "post", multipart: true], fn f -> %>
  <div class="row mt-3">
    <div class="form-group col-6">
      <%= input f, :title, "Title", [class: "form-control", type: "text", placeholder: "Enter Title", required: true] %>
    </div>
    <div class="form-group col-6">
     <%= input f, :description, "Description", [class: "form-control", type: "text", placeholder: "Enter Description", required: true] %>
    </div>
  </div>
  <div class="d-flex mt-3">
   <%= submit "Create Post" %>
  </div>
<% end %>

上面的表单运行良好，现在我想更改此表单以实现LiveView。所以我做了这样的事情

<%= form_for @changeset, "#", [method: "post", multipart: true], fn f -> %>
  <div class="row mt-3">
    <div class="form-group col-6">
      <%= input f, :title, "Title", [class: "form-control", type: "text", placeholder: "Enter Title", required: true] %>
    </div>
    <div class="form-group col-6">
     <%= input f, :description, "Description", [class: "form-control", type: "text", placeholder: "Enter Description", required: true] %>
    </div>
  </div>
  <div class="d-flex mt-3">
   <button phx-click="create-post" phx-value="form-value">Create Post"</button>
  </div>
<% end %>

我对form-value的位置感到困惑，需要发送什么才能在我的handle_event函数中获得包含title和description的正确表单数据。

我尝试传递@changeset和f，但他们发送的是包含我的title和description的正确phx-value。

不确定，如果我用LiveView正确地实现了表单，或者它需要以不同的方式完成。

Answer 1

这里唯一的区别是您不想在form_for中使用匿名函数。

<%= form_for @changeset, "#", [phx_submit: "post", multipart: true], fn f -> %>
...
<% end %>

变成了

<%= f = form_for @changeset, "#", [phx_submit: "post", multipart: true] %>
...
</form>

不能对匿名函数内容进行区分。

Answer 2

这是使用phoenix liveview实现表单的正确方法。

<%= form_for @changeset, "#", [phx_submit: "post", multipart: true], fn f -> %>
  <div class="row mt-3">
      <div class="form-group col-6">
        <%= input f, :title, "Title", [class: "form-control", type: "text", placeholder: "Enter Title", required: true] %>
      </div>
      <div class="form-group col-6">
       <%= input f, :description, "Description", [class: "form-control", type: "text", placeholder: "Enter Description", required: true] %>
      </div>
    </div>
    <div class="d-flex mt-3">
      <%= submit "Create Post", phx_disable_with: "Posting..." %>
    </div>
<% end %>