shadcn, number input, form hook
Answered
Wool sower gall maker posted this in #help-forum
Wool sower gall makerOP
Anyone has an idea how can i get rid of the "A component is changing an uncontrolled input to be controlled" Error from useForm hook? I dont want to provide a default value or at least a empty string which should be read as 0 but its not working.
const formSchema = z.object({
role: z.string().min(2, {
message: "Role must be at least 2 characters",
}),
duration: z.coerce
.number({
invalid_type_error: "Duration must be a number",
required_error: "Duration is required",
}).int().min(2, {
message: "Duration must be atleast 2 hours"
}),
active: boolean()
})
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
role: "",
active: true
},
})30 Replies
Wool sower gall makerOP
<FormField
control={form.control}
name="duration"
render={({field}) => (
<FormItem>
<FormLabel>Duration</FormLabel>
<FormControl>
<div className="flex justify-between gap-3">
<>
<Input {...field}/>
<Button type="submit" size="icon" variant="ghost">
<Icons.plus className="bg-inverse"></Icons.plus>
</Button>
</>
</div>
</FormControl>
<FormDescription className="text-xs">
</FormDescription>
<FormMessage className="text-xs"/>
</FormItem>
)}
/>If I'm not wrong, you can't do anything about it, the number will be string, so while checking in zod schema, you want to parse it into number, and then do validations.
Cause input returns string
no matter the type IIRC
@averydelusionalperson Cause input returns string
Wool sower gall makerOP
yea i got that I understand z.coerce is taking care of it but if i dont provide a defaultValue for duration im getting the react error - I would expect something like "" => wil be converted to 0
why don't you want to pass the default value?
I learned new thing today, coerce, thanks man
U can pass '0' right?
Wool sower gall makerOP
yea but i just want to display the placeholder xD not an existing value
What is the placeholder?
Wool sower gall makerOP
just duration
Use FormDescription maybe?
if user typed something, and then forgot what he was supposed to type, formdescription might be useful
Wool sower gall makerOP
yea its also added
but i want to understand the problem and i dont get it 😄
as i type something in duration im getting this error
IG the problem is, initially the value is undefined, means you are not controlling the input, then when you type you are setting value, then you are trying to control it
atleast that's what I think
Wool sower gall makerOP
yea exactly how can i resolve it?
without providing a default value if i do all works gucci
just control it from the beginning? add the default value instead of keeping it undefined
@averydelusionalperson just control it from the beginning? add the default value instead of keeping it undefined
Wool sower gall makerOP
ah okay seems i cant get rid of it 😄
yeah lol
u can't get rid of somethings in your life
Wool sower gall makerOP
thank you so much
meh, I didn't do much, but if your problem is solved, consider marking message you found useful as the solution
Wool sower gall makerOP
but weird i read coerce is taking care about empty or undfined which leads to 0 but it doesnt work
@Wool sower gall maker but weird i read coerce is taking care about empty or undfined which leads to 0 but it doesnt work
it parses the value into number for validation, but the value is still undefined till you type
@averydelusionalperson it parses the value into number for validation, but the value is still undefined till you type
Wool sower gall makerOP
okay thanks for your time i rly appreciate it
Answer