formik-patterns

此技能為使用 Formik 和 Yup 的 React 專案提供了一套處理複雜表單狀態、驗證邏輯與非同步提交的標準化框架。它專為需要實作穩健且使用者友善表單的開發者設計，確保表單實作遵循一致的架構模式。透過運用此技能，開發者可以減少重複程式碼、確保型別安全，並在各種表單元件（包含登入畫面、資料輸入精靈與管理儀表板）中保持可預測的行為。此技能涵蓋了從基本設定、驗證架構定義，到條件式驗證與狀態管理的進階場景。

• 提供 Formik 與 Yup 整合的範本，包含電子郵件、密碼、電話號碼與數值範圍限制等常用驗證模式。

• 包含用於管理欄位屬性、觸發狀態與錯誤訊息的輔助工具，簡化 UI 元件的整合流程。

• 實作非同步表單提交的最佳實踐，特別是在與 GraphQL Mutations 整合時，包含載入、成功與失敗狀態的追蹤處理。

• 支援條件式驗證邏輯，允許根據表單內其他欄位的值動態調整欄位的必填狀態。

• 提供管理表單重置、欄位初始化與重新初始化的技巧，適用於依賴外部資料屬性的編輯頁面。

• 確保表單提交具備良好的 UI 反饋，例如在處理期間停用按鈕並管理提交狀態，以提供優質的使用者體驗。

• 當啟動新的表單功能時，請使用此技能以確保你的實作符合驗證與錯誤處理的儲存庫標準。

• 輸入需求包含表單定義、資料架構與必要的 API 端點或 Mutation Hooks。

• 預期輸出為整潔且易於維護的表單元件，能與現有的 UI 函式庫和後端服務無縫整合。

• 請注意，此技能主要針對使用 Formik 函式庫與 Yup 進行架構驗證的 React 與 React Native 環境設計。

• 請務必使用 formik.dirty 來追蹤變更，並確保在適當的情況下將 validationSchema 定義在元件渲染週期之外，以避免效能退化。

• 在實作複雜表單時，可將此技能與 graphql-schema 和 react-ui-patterns 結合使用，以進行全面的功能開發。