parseWithZod

提供された zod スキーマを使用してフォームデータを解析し、送信内容の概要を返すヘルパーです。

1const submission = parseWithZod(payload, options);

#パラメータ

`payload`

フォームの送信方法に応じて、 FormData オブジェクトまたは URLSearchParams オブジェクトのいずれかになります。

`options`

`schema`

Zod スキーマ、または Zod スキーマを返す関数のいずれかです。

`async`

safeParse の代わりに zod スキーマから safeParseAsync メソッドを使用してフォームデータを解析したい場合は、 true に設定してください。

`errorMap`

フォームデータを解析する際に使用される zod のエラーマップです。

`formatError`

エラー構造をカスタマイズし、必要に応じて追加のメタデータを含めることができる関数です。

#例

1import { parseWithZod } from '@conform-to/zod';
2import { useForm } from '@conform-to/react';
3import { z } from 'zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string(),
8});
9
10function Example() {
11  const [form, fields] = useForm({
12    onValidate({ formData }) {
13      return parseWithZod(formData, { schema });
14    },
15  });
16
17  // ...
18}

#Tips

自動型変換

Conform は空の値を除去し、スキーマを内省することでフォームデータを期待される型に強制し、追加の前処理ステップを注入します。以下のルールが適用されます:

値が空の文字列 / ファイルである場合、スキーマに undefined を渡します。
スキーマが z.string() の場合、値をそのまま渡します。
スキーマが z.number() の場合、値をトリムして Number コンストラクタでキャストします。
スキーマが z.boolean() の場合、値が on に等しい場合には true として扱います。
スキーマが z.date() の場合、値を Date コンストラクタでキャストします。
スキーマが z.bigint() の場合、値を BigInt コンストラクタでキャストします。

この挙動は、スキーマ内で独自の z.preprocess ステップを設定することで上書きすることができます。

注意: v3.22 以降、 z.preprocess の挙動に関して Zod のリポジトリには複数のバグレポートがあります。例えば、 https://github.com/colinhacks/zod/issues/2671 および <br> https://github.com/colinhacks/zod/issues/2677 があります。問題を経験している場合は、v3.21.4 にダウングレードしてください。

1const schema = z.object({
2  amount: z.preprocess((value) => {
3    // 値が提供されていない場合は、 `undefined` を返します。
4    if (!value) {
5      return undefined;
6    }
7
8    // 書式をクリアして値を数値に変換します。
9    return Number(value.trim().replace(/,/g, ''));
10  }, z.number()),
11});

デフォルト値

Conform は常に空の文字列を削除し、それらを「undefined」にします。 .transform() をスキーマに追加して、代わりに返されるデフォルト値を定義します。

1const schema = z.object({
2  foo: z.string().optional(), // string | undefined
3  bar: z
4    .string()
5    .optional()
6    .transform((value) => value ?? ''), // string
7  baz: z
8    .string()
9    .optional()
10    .transform((value) => value ?? null), // string | null
11});