用 <.form> 來顯示 changeset

先來複習一下我們怎麼改變資料

1. 取出資料
2. 變成 changeset
3. 加入要更改的項目
4. 儲存

在 iex -S mix 裡面我們已經可以輕易地做到了
但是我們要呈現的是網頁，要讓使用者有一個網頁的介面可以更改數值，所以我們要調整一下第三步
整個變成

1. 取出要更改的資料
2. 把資料轉變成 changeset
3. 根據 changeset 在畫面上顯示表格
4. 送出編輯後的表格，把送出的內容變成 changeset
5. 儲存

建立 edit 頁面

假如我在某篇文章的 show 頁面 /posts/3
我想要更改他，我們可以利用 resources 附上的路徑 /posts/3/edit

進到這個網址就會呼叫 PostController 的 edit 方法，現在還沒有所以畫面進不去，我們來做一個吧

  def edit(conn, %{"id" => id}) do
    post = Posts.get_post(id)
    changeset = Posts.change_post(post)
    render(conn, :edit, %{post: post, changeset: changeset})
  end

跟 show 非常像，只是多一個 changeset

如果他抱怨還沒有 Posts.change_post(post) 這個方法的話，可以在 Posts 新增一個，
仔細看他只是直接執行 Post schema 上的 changeset 方法而已

  def change_post(%Post{} = post, attrs \\ %{}) do
    Post.changeset(post, attrs)
  end

當然我們也需要幫他建立畫面，可以先顯示一下標題證明我們資料有拉對
建立檔案 lib/blog_web/templates/post/edit.html.heex

更改文章： <%= @post.title %>

使用 form 與 changeset 顯示表格

我們可以使用 <.form > 這個 component 來將 changeset 顯示成可以更改的表格

更改檔案 lib/blog_web/templates/post/edit.html.heex

更改文章： <%= @post.title %>

<.form let={f} for={@changeset} action={Routes.post_path(@conn, :update, @post)}>
  <%= label(f, :title) %>
  <%= text_input(f, :title) %>

  <%= label(f, :body) %>
  <%= textarea(f, :body) %>

  <div>
    <%= submit("送出") %>
  </div>
</.form>

這邊來解釋一下 form 做了什麼事情
首先這個寫法 <.form >
其實是去呼叫 Phoenix.LiveView.Helpers.form/1 這個 component 方法，
因為我們的 view 層已經有 import 過 Phoenix.LiveView.Helpers 所以我們只要打上 <.form> 就可以在 heex 檔案裡面呼叫 component 方法，詳細的 component 寫法後續會介紹，
現在可以先理解成

<.form let={f} for={@changeset} action={Routes.post_path(@conn, :update, @post)}>
  內容
</.form>

在這一層 form 裡面可以使用 form 給出來的 f (form) 來接各個欄位(標題,內容)
for 則是給他要顯示的 changeset, action 是送出表格時要送到的路徑。

另外在 phoenix 提供了一系列的輸入欄位方法可以使用
目前使用到的有文字輸入(text_input) 與 文字區域(textarea)
文件上則有更多類型與他的範例

眼尖的朋友已經發現 我們的 action 路徑用的是 :update
下一片就是在 controller 使用 update 方法來接收驗證與儲存更改的資料