由於昨天在註冊頁面有使用到表單搭配驗證套件 react-hook-form 使用，所以想說整理一下筆記這個套件的使用撰寫方式：

• 將 input 跟 Schema 連動在一起
• 搭配ZOD使用

import { Controller } from 'react-hook-form';

<Controller
  control={control}
  name="password"
  render={({ field, fieldState: { error } }) => (
    <>
      <input {...field} type="password" id="password" className="grow" />
      {error?.message && <span className="text-rose-600">{error.message}</span>}
    </>
  )}
/>

我將它拆解一下 每一個 props 用途：

control={control}

• 用途：這個 prop 由 useForm hook 生成的 control 對象傳入。它負責管理表單的狀態和驗證邏輯。

• 如何使用：在 useForm 中初始化並傳遞給 Controller。

const { control } = useForm();

name="password"

• 用途：指定這個 Controller 管理的表單欄位的名稱。在這個例子中，它是 "password"。
• 如何使用：將要管理的表單欄位名稱傳遞給 name。

render={({ field, fieldState: { error } }) => ( ... )}

• 用途：這是一個 render prop，用於渲染表單欄位和處理其狀態。它接收一個物件，該物件包含 field 和 fieldState，其中 field 是表單欄位的相關屬性和方法，fieldState 包含該欄位的驗證狀態。
• 如何使用：利用解構賦值來提取 field 和 error，並在 input 和錯誤訊息中使用。

{...field}

• 用途：這是一個展開運算子，將 field 中的所有屬性傳遞給 input 元素，確保 input 元素能夠正確地與表單狀態同步。

• 如何使用：將 field 屬性擴展到 input 元素中。

{error?.message && <span className="text-rose-600">{error.message}</span>}

• 用途：這段程式碼用於顯示驗證錯誤訊息。當 error 存在時，顯示錯誤訊息，並應用 "text-rose-600" 顏色樣式。

• 如何使用：在 render 方法中檢查 error 是否存在，如果存在則渲染錯誤訊息。

後面的使用更加了解 <Controller> 要注意

• control：管理表單的狀態和驗證邏輯。
• name：指定表單欄位名稱。
• render：渲染表單欄位和處理其狀態，並顯示錯誤訊息。