2,585 questions
2
votes
1
answer
62
views
React Hook Form does not upadate `errors` field on parent when triggering children
I have the following schema in my RHF form:
const latexSchema = z.string().refine(
() => {
return solutionRef.current?.editor?.state.doc.textContent.length! >= 10;
},
'Wymagane jest co ...
- 393
1
vote
1
answer
102
views
How to make part of a Zod schema optional only on submit?
I have a React project using TypeScript, React Hook Form, and Zod.
My Zod schema looks like this:
import { z } from 'zod';
export const loyaltyNmvFormSchema = z.object({
maxPoint: z.coerce.number()....
- 1,334
-2
votes
1
answer
117
views
z.input and z.output no different for zodResolver [closed]
I have a vector3d object
const vector3DBase = z
.object({
x: z.number().nullable(),
y: z.number().nullable(),
z: z.number().nullable(),
})
When added to a bigger schema
export const ...
- 1,331
0
votes
1
answer
68
views
React Hook Form add global on change before (or override setValue)
I have a schema like this:
const filterHomeworksSchema = z.object({
page: z.number(),
pageSize: z.number(),
search: z.string().optional(),
sort: selectItem.nullable(),
solutionFormats: ...
- 393
1
vote
1
answer
78
views
React Hook Form v7 onError callback not firing
I’m using React Hook Form v7 with handleSubmit(onSubmit, onError).
Here’s my form component:
function CreateCabinForm() {
const { register, handleSubmit, reset } = useForm();
function onSubmit(...
1
vote
1
answer
40
views
Yup conditional validation not receiving field value
I have a simple react-hook-form driven form that I'm conditionally validating with yup. I have a dropdown that, depending on the selected value, should change the required-ness of the following field.
...
- 326
-1
votes
2
answers
122
views
React hook form + react query. Sync defaultValues on refetch without clobbering dirty fields, and hard-reset after submit [closed]
Context
I’m using React Hook Form together with React Query. The parent component fetches data with a query, derives defaultValues, and passes them into the form.
Parent component:
export const ...
1
vote
1
answer
633
views
Shadcn, React-hook-form, Zod resolver throwing Runtime error when zod validation fails
I am using Shadcn Form which uses React-Hook-Form and Zod Resolver, The problem is when i submit the form by clicking the button while making the input incorrect for testing (Putting 1 char on 2 char ...
- 130
0
votes
1
answer
256
views
React Hook Form + Zod throws error but error state is empty
I’m trying to make a form, and it has never been this hard. I’ve never had a problem with this before, but right now it’s making me freak out.
I have this very simple code:
import { useForm } from &...
0
votes
0
answers
102
views
react-hook-form useFieldArray overrides the id fields
Before there was an option to change the autogenerated id field name with keyName config (in useFieldArray). In the latest version it's not possible to set keyName to something else. My question is. ...
0
votes
1
answer
100
views
Type error in the shadcn/ui FormField component
My zod schema is:
export const CourseSchema = z.object({
title: requiredString.max(100, { error: 'The title must not be longer than 100 characters!' }),
briefDescription: requiredString.max(200, {
...
1
vote
1
answer
112
views
How do I make a DatePicker get focused on submit, if the field is empty or giving errors?
I'm trying to use @mui/x-date-pickers: "^8.3.1 DatePicker component in a form with react-hook-form: "^7.62.0"
Using some workarounds, I managed to give errors on blur and on submit, but ...
- 1
1
vote
1
answer
101
views
Should I split useWatch into individual calls to avoid unnecessary useEffect triggers in React Hook Form?
I'm using React Hook Form along with useWatch and useEffect. I’m currently watching multiple fields using a single useWatch call:
const [isRevolving, facilityGroup, facilities, payerGroupRates, ...
0
votes
1
answer
223
views
How to safely use useWatch with required nested object fields in yup schema without default values?
I'm using react-hook-form with yup for validation and type inference (InferType). I have a required nested object in the schema, but I'm not setting default values for it at form initialization (...
0
votes
1
answer
79
views
Handle multiple types 'react-hook-form'
Currently I'm working in a component that has two children, each children has their specific components and their own form, the structure of the data is similar. I'm using react js with hook form to ...
- 450
2
votes
2
answers
466
views
Type Error with Optional Fields in React Hook Form and Yup Schema
I'm encountering a problem while using React Hook Form with Yup for validation. I have a schema where some fields are optional, but I'm getting a type error related to the resolver.
Here's my Yup ...
- 21
2
votes
1
answer
517
views
Zod + react-hook-form: .default(false) still resolves as boolean | undefined as if it were.optional()
I am facing a type mismatch issue while using "zod" schema with useForm of "react-hook-form".
Resolver showing error for type mismatch. I set default value and not optional but ...
- 2,028
2
votes
0
answers
134
views
How to conditionally validate nested object fields in Zod + React Hook Form only after form submission?
I'm using React Hook Form with Zod in a Next.js project, and I'm trying to validate a nested repetition field based on the selected repetition_type.
My problem is:
Validation runs immediately when ...
- 29
0
votes
0
answers
78
views
Fields are optional despite having a required property - How to handle it?
I am new to react-hook-form. My form schema is described below:
My name property is required. But, when I use spread syntax to create data as a payload to send to server, TypeScript always says that ...
- 1
0
votes
1
answer
113
views
Recursively map through zod shape
I have react-hook-form and zod/v4 for forms. I define zod validation object, and pass it as resolver to useForm. zod marks all fields as required by default and could mark them as optional. I need to ...
- 543
0
votes
1
answer
101
views
Get error or property using useLense in react-hook-form
Using react-hook-form and try to be typescript compliant. I have a type:
export type Vector3D = {
x: number;
y: number;
z: number;
};
And my reusable component
function Vector3DComponent({ lens ...
- 1,331
0
votes
0
answers
37
views
Form field array losing data when adding new rows in another field array
Description:
I have a form with two separate useFieldArray sections (System Users and Board Members). When I add a new row to one field array after entering data in the other, the previously entered ...
- 35
0
votes
2
answers
61
views
React DatePicker flashes inside React Hook Form Controller render prop
I'm using react-datepicker inside a Controller from react-hook-form. The component works, but I'm seeing a strange issue:
Every time I interact with the DatePicker (e.g., select a date), the component ...
- 1,972
0
votes
1
answer
57
views
Why is my form not preselecting the market value when editing a broker in React?
React Hook Form Select Not Showing Pre-selected Value When Editing
I have a React form using React Hook Form and shadcn/ui Select components. When I click "Edit" on a table row to edit a ...
- 35
1
vote
0
answers
150
views
How to solve excessively deep and possibly infinite types when using zodResolver
I am creating a form using react-hook-form, zod and @hookform/resolvers. I want a single form where the user can select an option and, based on the option, different values are required. Here are my ...
- 1,899
0
votes
1
answer
59
views
How can I stop onBlur on tab change in react-hook-form?
<Controller
name={name}
control={control}
rules={
{
validate: (value) => {
if (rules.required) {
...
1
vote
0
answers
154
views
Unable to enter values in react-hook-form FieldArray with TanStack Table integration
I'm building a form with react-hook-form that includes a useFieldArray for system users, displayed in a TanStack Table. While I can add new users, I can't edit the "Employee Name" and "...
- 35
0
votes
0
answers
350
views
Performance Issues in React Hook Form with watch() and Select dropdown
I’m using React Hook Form (RHF) for form handling and Yup for validation in my React app. I have a dynamic list of rows, each containing an Autocomplete component from Material-UI (MUI), along with ...
0
votes
0
answers
98
views
In a react native project, Zod and React Hook Form not working properly together
Trying to integrate React Hook Form and Zod in a react native project by applying validation rules using Zod to a signup form, but when I press the button, Zod isn't triggered to show any errors, even ...
- 25
1
vote
1
answer
96
views
Multi-step form only submits last step's values – how to preserve and submit all step values?
I'm building a reusable form component in React that supports both:
Simple (single-step) forms, and
Multi-step forms (each step has its own schema and inputs).
I'm using:
react-hook-form
Zod for ...
- 161
0
votes
1
answer
54
views
Zod validation considering a File object to be a String (C:\fakepath\file.jpg) when submitting a form with react-hook-form
I'm building a NextJS15 Form with useForm() hook and Zod validation that includes a file Input. Unfortunately, when I try to submit the form, Zod considers the uploaded file as a String (C:\FakePath\...
0
votes
0
answers
50
views
React Hook Form Switch toggle not updating immediately with useFieldArray
I'm implementing a form with react-hook-form and useFieldArray where users can add multiple account sets (cash account + trade account + currency) and set one as default using a toggle switch. However,...
- 35
1
vote
1
answer
81
views
React Hook Form - setValue or field.onChange causes scroll to top on first trigger only
<Controller
name='acknowledged_by_nurse'
control={control}
render={({ field, fieldState }) => (
<Button
label="...
0
votes
0
answers
134
views
How to focus the useFieldArray field on Zod-validation error in React Hook Form?
I'm using React Hook Form with a field array for phone numbers, and Zod for validation.
When the form is submitted and the array is empty, my Zod schema returns an error like:
{
"phoneNumbers&...
- 459
0
votes
1
answer
114
views
Blank page on the browser in my ReactJS app using React Hook Form
The browser shows me blank page and I see no error in the VS Code and terminal, but in the console, I see:
"Uncaught Error: Too many re-renders. React limits the number of renders to prevent an ...
- 3
1
vote
1
answer
51
views
React hook form field resets after submission
The component uses react-hook-form for a two-step form (email then password). After submitting the email address in the first step, the email value appears to be reset to undefined. This prevents the ...
- 21
0
votes
1
answer
460
views
useFormContext is null when using react-hook-form wrapped by shadcn
I'm using react-hook-form with a shadcn wrapper, and usually it works well. But in this particular component, I get this error on runtime, that useFormContext is null in my shadcn coponent.
<Form {....
- 4,686
3
votes
1
answer
4k
views
Error: Export useForm doesn't exist in target module
I am trying to use react-hook-form in my nextjs component with shadcnUI Form. But the error that I am having is :
Export useForm doesn't exist in target module
23 | FormMessage,
24 | } from "@/...
0
votes
1
answer
181
views
Form validation with: React Hook Form + Server actions
Is it possible to validate a form before sending it to the client using RHF error states when submitting a form like this?
const { control } = useForm<Tenant>({
defaultValues: {
name: '...
1
vote
1
answer
124
views
How to validate onSubmit and wait for errors to resolve?
I have a form built with react-hook-form. It looks like this:
export default function PersonForm({
ref,
mutation,
defaultValues = formDefaultValues,
}: {
ref: RefObject<...
- 1,610
0
votes
1
answer
180
views
Dynamic form in react-hook-form with automatic appending
I am struggling creating a dynamic form with react-hook-form's useFieldArry, that appends a new field/input whenever the last field element gets non-empty (so that the user do not have to care about ...
- 838
1
vote
2
answers
74
views
Multistep form validate real-time
I'm building a multi-step form using React Hook Form and Zod for validation.
Each step of the form has its own fields and a "Next" button to go to the next section. Here's what I want to ...
- 21
0
votes
1
answer
55
views
How to create a reusable controlled TextField using MUI and React Hook Form?
I'm working on a form in React using Material UI (MUI) and react-hook-form, and I want to create a reusable TextField component that:
Works with react-hook-form using the Controller.
Supports ...
0
votes
1
answer
50
views
Cannot change TextField after handle submit react hook form
I am using Next with react-hook-form to handle form
This is my create useForm code:
const {
control,
setError,
setValue,
handleSubmit,
formState: { errors },
} = useForm({
...
- 865
2
votes
1
answer
78
views
Zod Conditional Validation based on fetched data
I am fetching tsmin, tsmax values from get api. I have defined a zod schema with gte validation.
const tsmin = Number(getMinMechProp("tensilestrength"));
const tsmax = Number(...
- 23
0
votes
2
answers
929
views
How to dynamically update Yup validation schema in React Hook Form when a field value changes (using yup.lazy)?
I'm using react-hook-form with the latest version of yup, and I'm trying to implement dynamic validation that depends on a type field selected by the user. The validation schema is generated using yup....
- 15.4k
0
votes
0
answers
69
views
Why can't I delete the data if it's left alone?
Why I can't delete the data if its left alone? I'm having a hard time how can I debug this, I'm using react-hook-form and maximizing the use of useFieldArray. I already have the ability to add and ...
- 795
0
votes
1
answer
141
views
filter using react hook form not working?
I am creating a small list using React Hook Form with useFieldArray. I want to filter the list when the user types anything in the search field. However, the filtering is not working.
Below is my code:...
- 12.8k
0
votes
0
answers
91
views
Custom error keys in react-hook-form with zod (superRefine & ctx.addIssue)
Is it possible to add custom keys to the Zod ctx.addIssue that can then be retrieved in the Form.formState.errors from react-hook-form?
For example here I want to add "foo" as a custom entry:...
- 4,138
1
vote
2
answers
137
views
How to write validation on zod depending on react state
There is a state that can take the values true or false. If state is true, the field is required, otherwise it is not. How to validate depending on the condition? I found an example:
const [...
- 160