You can create a field config then map the over the fields that use the same component
form
I've read the docs about the implementation of Tanstack Form with shadcn Field component. But in their docs, all I saw was a bunch of boilerplate code. I want to implement a proper reusable form.
Here's there original template with Tanstack form:
1{profileFields.map((fieldConfig) => (
2 <Controller
3 key={fieldConfig.name}
4 name={fieldConfig.name}
5 control={form.control}
6 render=...
1{profileFields.map((fieldConfig) => (
2 <Controller
3 key={fieldConfig.name}
4 name={fieldConfig.name}
5 control={form.control}
6 render=...
1"use client"
2
3import * as React from "react"
4import { useForm } from "@tanstack/react-form"
5import { toast } from "sonner"
6import* as z from "zod"
7
8import { Button } from "@/components/ui/button"
9import {
10 Card,
1"use client"
2
3import * as React from "react"
4import { useForm } from "@tanstack/react-form"
5import { toast } from "sonner"
6import* as z from "zod"
7
8import { Button } from "@/components/ui/button"
9import {
10 Card,
11 CardContent,
11 CardContent,
12 CardDescription,
13 CardFooter,
14 CardHeader,
15 CardTitle,
16} from "@/components/ui/card"
17import {
18 Field,
19 FieldDescription,
20 FieldError,
21 FieldGroup,
22 FieldLabel,
23} from "@/components/ui/field"
24import { Input } from "@/components/ui/input"
25import {
26 InputGroup,
27 InputGroupAddon,
28 InputGroupText,
29 InputGroupTextarea,
30} from "@/components/ui/input-group"
31
32const formSchema = z.object({
33 title: z
34 .string()
35 .min(5, "Bug title must be at least 5 characters.")
36 .max(32, "Bug title must be at most 32 characters."),
37 description: z
38 .string()
39 .min(20, "Description must be at least 20 characters.")
40 .max(100, "Description must be at most 100 characters."),
