Write your answer here Post Answer
Search... ⌘ K Command Palette Search for a command to run...
Write your answer here How to implement Tanstack Form with new shadcn Field component? | Dev4Room
How to implement Tanstack Form with new shadcn Field component? 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:
You can create a field config then map the over the fields that use the same component
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
3 import * as React from "react"
4 import { useForm } from "@tanstack/react-form"
5 import { toast } from "sonner"
6 import * as z from "zod"
7
8 import { Button } from "@/components/ui/button"
9 import {
10 Card,
1 " use client "
2
3 import * as React from " react "
4 import { useForm } from " @tanstack/react-form "
5 import { toast } from " sonner "
6 import * as z from " zod "
7
8 import { Button } from " @/components/ui/button "
9 import {
10 Card,
11 CardContent,
11 CardContent,
16 } from "@/components/ui/card"
23 } from "@/components/ui/field"
24 import { Input } from "@/components/ui/input"
30 } from "@/components/ui/input-group"
32 const formSchema = z. object ({
35 . min ( 5 , "Bug title must be at least 5 characters." )
36 . max ( 32 , "Bug title must be at most 32 characters." ),
39 . min ( 20 , "Description must be at least 20 characters." )
40 . max ( 100 , "Description must be at most 100 characters." ),
43 export function BugReportForm () {
44 const form = useForm ({
52 onSubmit : async ({ value }) => {
53 toast ( "You submitted the following values:" , {
55 < pre className = "bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4" >
56 < code > { JSON . stringify (value, null , 2 ) } </ code >
59 position: "bottom-right" ,
61 content: "flex flex-col gap-2" ,
64 "--border-radius" : "calc(var(--radius) + 4px)" ,
65 } as React . CSSProperties ,
71 < Card className = "w-full sm:max-w-md" >
73 < CardTitle >Bug Report</ CardTitle >
75 Help us improve by reporting bugs you encounter.
89 children ={ ( field ) => {
91 field.state.meta.isTouched && ! field.state.meta.isValid
93 < Field data-invalid ={ isInvalid } >
94 < FieldLabel htmlFor ={ field.name } >Bug Title</ FieldLabel >
98 value ={ field.state.value }
99 onBlur ={ field.handleBlur }
100 onChange ={ ( e ) => field. handleChange (e.target.value) }
101 aria-invalid ={ isInvalid }
102 placeholder = "Login button not working on mobile"
106 < FieldError errors ={ field.state.meta.errors } />
114 children ={ ( field ) => {
116 field.state.meta.isTouched && ! field.state.meta.isValid
118 < Field data-invalid ={ isInvalid } >
119 < FieldLabel htmlFor ={ field.name } >Description</ FieldLabel >
124 value ={ field.state.value }
125 onBlur ={ field.handleBlur }
126 onChange ={ ( e ) => field. handleChange (e.target.value) }
127 placeholder = "I'm having an issue with the login button on mobile."
129 className = "min-h-24 resize-none"
130 aria-invalid ={ isInvalid }
132 < InputGroupAddon align = "block-end" >
133 < InputGroupText className = "tabular-nums" >
134 { field.state.value. length } /100 characters
139 Include steps to reproduce, expected behavior, and what
143 < FieldError errors ={ field.state.meta.errors } />
153 < Field orientation = "horizontal" >
154 < Button type = "button" variant = "outline" onClick ={ () => form. reset () } >
157 < Button type = "submit" form = "bug-report-form" >
16 } from " @/components/ui/card "
23 } from " @/components/ui/field "
24 import { Input } from " @/components/ui/input "
30 } from " @/components/ui/input-group "
32 const formSchema = z. object ({
35 . min ( 5 , " Bug title must be at least 5 characters. ")
36 . max ( 32 , " Bug title must be at most 32 characters. "),
39 . min ( 20 , " Description must be at least 20 characters. ")
40 . max ( 100 , " Description must be at most 100 characters. "),
43 export function BugReportForm () {
44 const form = useForm ({
52 onSubmit : async ({ value }) => {
53 toast (" You submitted the following values: ", {
55 < pre className = " bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4 ">
56 < code >{JSON. stringify (value, null , 2 )}</ code >
59 position: " bottom-right ",
61 content: " flex flex-col gap-2 ",
64 " --border-radius ": " calc(var(--radius) + 4px) ",
65 } as React . CSSProperties ,
71 < Card className = " w-full sm:max-w-md ">
73 < CardTitle >Bug Report</ CardTitle >
75 Help us improve by reporting bugs you encounter.
89 children = {( field ) => {
91 field.state.meta.isTouched && ! field.state.meta.isValid
93 < Field data-invalid = {isInvalid}>
94 < FieldLabel htmlFor = {field.name}>Bug Title</ FieldLabel >
98 value = {field.state.value}
99 onBlur = {field.handleBlur}
100 onChange = {( e ) => field. handleChange (e.target.value)}
101 aria-invalid = {isInvalid}
102 placeholder = " Login button not working on mobile "
106 < FieldError errors = {field.state.meta.errors} />
114 children = {( field ) => {
116 field.state.meta.isTouched && ! field.state.meta.isValid
118 < Field data-invalid = {isInvalid}>
119 < FieldLabel htmlFor = {field.name}>Description</ FieldLabel >
124 value = {field.state.value}
125 onBlur = {field.handleBlur}
126 onChange = {( e ) => field. handleChange (e.target.value)}
127 placeholder = " I'm having an issue with the login button on mobile. "
129 className = " min-h-24 resize-none "
130 aria-invalid = {isInvalid}
132 < InputGroupAddon align = " block-end ">
133 < InputGroupText className = " tabular-nums ">
134 {field.state.value.length}/100 characters
139 Include steps to reproduce, expected behavior, and what
143 < FieldError errors = {field.state.meta.errors} />
153 < Field orientation = " horizontal ">
154 < Button type = " button " variant = " outline " onClick = {() => form. reset ()}>
157 < Button type = " submit " form = " bug-report-form ">
