diff --git a/docs/checkbox-and-radio-group.md b/docs/checkbox-and-radio-group.md index 6c7235a3..390d672f 100644 --- a/docs/checkbox-and-radio-group.md +++ b/docs/checkbox-and-radio-group.md @@ -37,7 +37,7 @@ function Example() { ## Checkbox -Setting up a checkbox group would be similar to a radio group except the initialValue can be either a string or an array because of missing information on the server side whether the checkbox is a boolean or a group. You can derive the **defaultChecked** value from the initialValue as shown below. +Setting up a checkbox group would be similar to a radio group except the initialValue can be either a string or an array because of missing information on the server side whether the checkbox is a boolean or a group. You can derive the **defaultChecked** value from the initialValue as shown below. As the errors from both yup and zod are mapped based on the corresponding paths and the errors of each option will be mapped to its corresponding index, e.g. `answer[0]` instead of the array itself, e.g. `answers`. If you want to display all the errors, you can consider using the **allErrors** property on the field metadata instead. ```tsx import { useForm } from '@conform-to/react'; @@ -65,7 +65,7 @@ function Example() { /> ))} -
{fields.answer.errors}
+
{Object.values(fields.answer.allErrors).flat()}
diff --git a/docs/file-upload.md b/docs/file-upload.md index 88f24cd5..719b2896 100644 --- a/docs/file-upload.md +++ b/docs/file-upload.md @@ -70,11 +70,7 @@ function Example() {
-
- {Object.entries(fields.files.allErrors).flatMap( - ([, messages]) => messages, - )} -
+
{Object.values(fields.files.allErrors).flat()}
diff --git a/docs/ja/checkbox-and-radio-group.md b/docs/ja/checkbox-and-radio-group.md index c30a8980..b80fcb55 100644 --- a/docs/ja/checkbox-and-radio-group.md +++ b/docs/ja/checkbox-and-radio-group.md @@ -4,7 +4,7 @@ ## ラジオグループ -ラジオグループを設定するには、すべての入力で **name** 属性が同じであることを確認してください。また、フィールドメタデータから initialValue を使用して、ラジオボタンがチェックされるべきかを導き出すこともできます。 +ラジオグループを設定するには、すべての入力で **name** 属性が同じであることを確認してください。また、フィールドメタデータから initialValue を使用して、ラジオボタンがチェックされるべきかを導き出すこともできます。yup および zod からのエラーは、対応するパスに基づいてマッピングされ、各選択のエラーは、配列自体(例: `answers` )ではなく、対応するインデックス(例: `answer[0]` )にマッピングされます。すべてのエラーを表示したい場合は、フィールドメタデータの **allErrors** プロパティを代わりに使用することを検討できます。 ```tsx import { useForm } from '@conform-to/react'; diff --git a/docs/ja/file-upload.md b/docs/ja/file-upload.md index 4c9f373a..c9bff078 100644 --- a/docs/ja/file-upload.md +++ b/docs/ja/file-upload.md @@ -37,7 +37,7 @@ function Example() { ## 複数のファイル -複数のファイルをアップロードできるようにするには、ファイル入力に **multiple** 属性を設定する必要があります。フィールドメタデータのエラーが各ファイルのすべてのエラーを含んでいない可能性があることに注意することが重要です。 yup および zod からのエラーは、対応するパスに基づいてマッピングされ、各ファイルのエラーは、配列自体(例: `files` )ではなく、対応するインデックス(例: `files[0]` )にマッピングされます。すべてのエラーを表示したい場合は、フィールドメタデータの **allErrors** プロパティを代わりに使用することを検討できます。 +複数のファイルをアップロードできるようにするには、ファイル入力に **multiple** 属性を設定する必要があります。フィールドメタデータのエラーが各ファイルのすべてのエラーを含んでいない可能性があることに注意することが重要です。 yup および zod からのエラーは、対応するパスに基づいてマッピングされ、各選択のエラーは、配列自体(例: `files` )ではなく、対応するインデックス(例: `files[0]` )にマッピングされます。すべてのエラーを表示したい場合は、フィールドメタデータの **allErrors** プロパティを代わりに使用することを検討できます。 ```tsx import { useForm } from '@conform-to/react'; @@ -70,11 +70,7 @@ function Example() {
-
- {Object.entries(fields.files.allErrors).flatMap( - ([, messages]) => messages, - )} -
+
{Object.values(fields.files.allErrors).flat()}