tanstack-form

TanStack Form

$generated/schemas から派生したフィーチャースキーマとともに @tanstack/svelte-form を使用します。スキーマはフィーチャーが所有するファイルで拡張し、生成された出力は編集しないでください。

現在の例

• src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte：フォームの作成、送信、フィールドの構成、送信中の状態。
• src/Exceptionless.Web/ClientApp/src/lib/features/auth/schemas.ts：生成されたスキーマのエクスポートと、フィーチャー固有のバリデーション。
• src/Exceptionless.Web/ClientApp/src/lib/features/shared/validation.ts：ariaInvalid、mapFieldErrors、problemDetailsToFormErrors。

フォーム基盤を重複して実装せず、現在の実装に従ってください。API の ProblemDetails をフィールドエラーにマッピングし、失敗後も入力値を保持し、送信が成功した後にのみダイアログを閉じてください。

関連付けられたラベルと検証属性を備えた、インストール済みの Field コンポーネントを使用してください。処理中は重複送信を無効にしてください。コンポーネントの構成については、shadcn-svelte を参照してください。

送信のライフサイクル

1. 型付きのデフォルト値を定義し、機能固有またはフィールド間の制約を追加するために、生成された Zod スキーマを拡張します。
2. スキーマエラーには現在のフォームの同期バリデーションフックを使用し、サーバー操作には非同期送信フックを使用します。API 呼び出しを安易に別のフックへ移動せず、参照先の実装で定められたフックの契約に従ってください。
3. 操作を待機します。想定される ProblemDetails は problemDetailsToFormErrors でマッピングし、予期しない失敗には内部の詳細を公開せずにフォームレベルのエラーを表示します。
4. ariaInvalid と mapFieldErrors を介してフィールドの状態を関連付けます。フィールドに関係しない失敗も見えるように、フィールドエラーだけでなくフォームレベルのエラーも表示します。
5. 必要な処理が完了するまで保留状態を維持します。失敗時は入力値を保持し、リセット、画面遷移、またはダイアログを閉じる操作は、成功し、必要なキャッシュの整合性調整が完了した後にのみ行ってください。

無効な入力、サーバーによる拒否、繰り返しの送信、正常な完了を確認してください。ダイアログが閉じたことだけでは、保存が成功した証拠にはなりません。