parseWithZod

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

1const submission = parseWithZod(payload, options);

#パラメータ

`payload`

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

`options.schema`

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

`options.async`

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

`options.errorMap`

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

`options.formatError`

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

`options.disableAutoCoercion`

スキーマの自動強制変換を無効にし、フォームデータの解析方法を自分で管理したい場合は、true に設定します。

#例

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.number() の場合、値をトリムして Number コンストラクタでキャストします。
スキーマが z.boolean() の場合、値が on に等しい場合には true として扱います。
スキーマが z.date() の場合、値を Date コンストラクタでキャストします。
スキーマが z.bigint() の場合、値を BigInt コンストラクタでキャストします。

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

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});