ネストされたオブジェクトと配列
Conform は、 name 属性の命名規則を活用することで、ネストされたオブジェクトと配列の両方をサポートしています。
#命名規則
Conform は、データ構造を示すために object.property
および array[index]
の構文を使用します。これらの表記法は、ネストされた配列に対しても組み合わせることができます。例えば、 tasks[0].content
のようになります。フォームデータに ['tasks[0].content', 'Hello World']
というエントリがある場合、構築されるオブジェクトは { tasks: [{ content: 'Hello World' }] }
になります。
しかし、各フィールドの name 属性を手動で設定する必要はありません。 Conform は常に名前を推測してくれるため、生成された名前を全て使用していれば、より良い型安全性が得られます。
#ネストされたオブジェクト
ネストされたフィールドを設定するには、親フィールドのメタデータから getFieldset()
メソッドを呼び出し、名前が自動的に推測される各子フィールドにアクセスしてください。
1import { useForm } from '@conform-to/react';
2import { parseWithZod } from '@conform-to/zod';
3import { z } from 'zod';
4
5const schema = z.object({
6 address: z.object({
7 street: z.string(),
8 zipcode: z.string(),
9 city: z.string(),
10 country: z.string(),
11 }),
12});
13
14function Example() {
15 const [form, fields] = useForm({
16 onValidate({ formData }) {
17 return parseWithZod(formData, { schema });
18 },
19 });
20 const address = fields.address.getFieldset();
21
22 return (
23 <form id={form.id}>
24 {/* name を `address.street` 、`address.zipcode` などに設定します。 */}
25 <input name={address.street.name} />
26 <div>{address.street.errors}</div>
27 <input name={address.zipcode.name} />
28 <div>{address.zipcode.errors}</div>
29 <input name={address.city.name} />
30 <div>{address.city.errors}</div>
31 <input name={address.country.name} />
32 <div>{address.country.errors}</div>
33 </form>
34 );
35}
#配列
フィールドのリストを設定する必要がある場合は、親フィールドのメタデータから getFieldList()
メソッドを呼び出して、名前が自動的に推測される各アイテムフィールドにアクセスできます。リスト内のアイテムを変更したい場合は、 Intent button ページで説明されているように、 insert
、 remove
、 reorder
のインテントも使用できます。
1import { useForm } from '@conform-to/react';
2import { parseWithZod } from '@conform-to/zod';
3import { z } from 'zod';
4
5const schema = z.object({
6 todos: z.array(
7 z.object({
8 title: z.string(),
9 notes: z.string(),
10 }),
11 ),
12});
13
14function Example() {
15 const [form, fields] = useForm({
16 onValidate({ formData }) {
17 return parseWithZod(formData, { schema });
18 },
19 });
20 const tasks = fields.tasks.getFieldList();
21
22 return (
23 <form id={form.id}>
24 <ul>
25 {tasks.map((task) => (
26 <li key={task.key}>
27 {/* 名前を `tasks[0]` 、 `tasks[1]` などに設定します。 */}
28 <input name={task.name} />
29 <div>{task.errors}</div>
30 </li>
31 ))}
32 </ul>
33 </form>
34 );
35}
#ネストされた配列
ネストされた配列に対して、 getFieldset()
と getFieldList()
の両方を組み合わせて使用することもできます。
1import { useForm } from '@conform-to/react';
2
3function Example() {
4 const [form, fields] = useForm();
5 const todos = fields.todos.getFieldList();
6
7 return (
8 <form id={form.id}>
9 <ul>
10 {todos.map((todo) => {
11 const todoFields = todo.getFieldset();
12
13 return (
14 <li key={todo.key}>
15 <input name={todoFields.title.name} />
16 <div>{todoFields.title.errors}</div>
17 <input name={todoFields.notes.name} />
18 <div>{todoFields.notes.errors}</div>
19 </li>
20 );
21 })}
22 </ul>
23 </form>
24 );
25}