You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/form/README.md
+43Lines changed: 43 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -89,6 +89,49 @@ signupForm.inputProps;
89
89
*/
90
90
```
91
91
92
+
### Handle array values
93
+
94
+
You may want to submit multiple form values under the same name. This is common for multi-select file inputs, or generated inputs like "add a second contact."
95
+
96
+
You can aggregate values under the same name using `z.array()` in your validator:
97
+
98
+
```ts
99
+
import { createForm } from"simple:form";
100
+
importzfrom"zod";
101
+
102
+
const contact =createForm({
103
+
contactNames: z.array(z.string()),
104
+
});
105
+
```
106
+
107
+
Now, all inputs with the name `contactNames` will be aggregated. This [uses `FormData.getAll()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll) behind the scenes:
108
+
109
+
```astro
110
+
---
111
+
import { createForm } from "simple:form";
112
+
import z from "zod";
113
+
114
+
const contact = createForm({
115
+
contactNames: z.array(z.string()),
116
+
});
117
+
118
+
const res = await Astro.locals.form.getData(contact);
Note that `fieldErrors` can be retrieved by index. For example, to get parse errors for the second input, use `fieldErrors.contactNames[1]`.
134
+
92
135
### Parse form requests
93
136
94
137
You can parse form requests from your Astro component frontmatter. Simple form exposes helpers to parse and validate these requests with the [`Astro.locals.form`](https://docs.astro.build/en/reference/api-reference/#astrolocals) object.
0 commit comments