Questions tagged [react-hook-form]

My form includes the following fields: 1-Charge Amount Default Value =120 2-Charge Count Default Value=1 3-Total Amount =Charge Amount * Charge Count 4-Paid Amount 5-Balance =Total Amount - Paid Amount To view my code, visit: https://codesandbox ...

Issue at Hand: I am encountering an unexpected behavior with my controller in React Hook Form. I am having difficulty registering radio buttons as they are showing up as undefined. My Objective: I have created a reusable WrapperRadio component that inco ...

As I delve into learning React and Next.js, working with form submissions has been a breeze thanks to react-hook-form. However, I've hit a roadblock when it comes to handling radio buttons in my application. Specifically, there's a step where users need to ...

I am currently working with two Autocomplete fields. My objective is to update the value of the second field based on the value selected in the first field. However, I am encountering an issue where when I attempt to send the new value to the "setValue" f ...

When implementing react hook form in my React app, I encountered an issue while validating specific fields and had to add some conditions to the schema. yup .object({ test1: yup.number().when('test2', (test2: number, schema: yup.NumberSchem ...

I am using a select component from the MUI React library along with react-hook-form and controller. I have set a default value in the controller to use the reset function, but I am unable to change the value when a default value is set. Everything works ...

My code consists of the following component: const App = () => { const formProps = useForm({ mode: "onBlur", }); const { handleSubmit, formState, register, watch, reset } = formProps; return ( <FormProvider {...formProps}> & ...

Struggling to pass setValue to a react hook? In my custom react hook, I need to set values in a form using react-hook-form's setValue. Yet, after migrating from v6 to v7, I'm having trouble figuring out the proper typing for this. This is how the hook is ...

Trying to incorporate reCAPTCHA using react-hook-form along with react-hook-recaptcha is posing some challenges as an error related to 'window' being undefined keeps popping up: ReferenceError: window is not defined > 33 | const { recaptchaLoaded, rec ...

Presently, I am immersed in a project where I am utilizing shadcn/ui. Within the shadcn.ui form setup, they have integrated react-hook-form for managing the forms and zod for validation. My Inquiry Within React Hook Form, the state of an input field is co ...

I am searching for a way to clear the fields of a form without using reset() so that they still appear as changed. There are three options I am considering: using null, undefined, or ''. null Using null can cause issues with non-nullable fields, even if ...

Within my application, I am utilizing react-hook-form in conjunction with the latest version of MUI 5.11. I have developed a reusable Select component: ...someImports import { Control, Controller } from 'react-hook-form'; interface SelectProps { control ...

Utilizing the 'AutoComplete' component from Material Ui to display multiple checkboxes and showcase the selected options in a TextField. The issue arises upon form submission where the selected checkbox values appear empty, for example: category: "" It a ...

While using react-hook-form, I encountered the ?. operator. Can you explain its meaning? Here's an example of how it works: <span>{errors?.name?.message}</span> The errors variable is obtained from useForm() by destructuring, as shown below: c ...

Currently, I am utilizing the MUI autocomplete feature in conjunction with react-hook-form. I have meticulously followed the guidance provided in this insightful response. ControlledAutoComplete.jsx import { Autocomplete, TextField } from "@mui/mater ...

Hey there, team! Our usual practice is to validate the input when a user touches it and display an error message. However, when the user clicks submit, all fields should be marked as dirty and any error messages should be visible. Unfortunately, this isn&a ...

My form data contains: `agreementHeaderData.salesPerson ={{ id: "2", name: "Jhon,Snow", label: "Jhon,Snow", value: "<a href="/cdn-cgi/l/email-prot ...

Whenever the manufacturerWatchValue changes, I need to delete the model's value after the form has been initialized. However, the model loses its value during form initialization because the initialized variable is in the dependency list. Therefore, ...

I've been working on creating a form using react-hook-forms with Material UI's custom variant of TextField. The form is functioning correctly, but I'm encountering a warning message in the console during the rendering process. Warning: Function component ...

I'm currently developing a form with a date field utilizing MUI and react-hook-form for validation. I have experimented with two different methods of rendering the field, but when I try to submit the form, the expected value is not being returned: Me ...

Utilizing Material-UI's TextField alongside react-hook-form to monitor inputs has raised an issue for me. I have observed that regardless of the input type, it always returns a string. This creates conflicts with the data types I am using in my codeba ...

Currently, I am using a combination of react-hook-form with typescript and material-ui. My goal is to pass the error message as a helperText to the TextField. I attempted to achieve this by utilizing helperText={errors.email?.message} however, TypeScript ...

How can I implement validation to display an error message for the phone number field (using helperText with a minimum of 10 and maximum of 10 characters) and also show an error message if submitted without exactly 10 numeric digits? import ReactPhoneInp ...

Check out this code: https://codesandbox.io/s/inspiring-rhodes-jwv1zd?file=/src/App.js Steps to replicate the issue: Choose 'Fruits' from the first dropdown menu. Then select one of the fruits from the second dropdown menu. Now, change the first dropdow ...

Upon submission, I am encountering an issue where the value being retrieved is from the first option, resulting in a null value when selecting "female". However, the onChange function works correctly. <form onSubmit={handleSubmit(onSubmit)}> ...

Currently in the process of developing an app using T3 stack along with react-hook-form and zodResolver:@hookform/resolvers/zod Below is the zod schema that I have defined: export const AccountSchema = z.object({ id: z.string().uuid().optional(), titl ...

I recently integrated React Hook Form into my Next JS App for handling forms. In my setup, I have two form components named FormA and FormB. However, I encountered an issue where triggering the handleSubmit() function for FormB also triggered the handleSub ...

I have been working on developing a registration form using Next.js, react-hook-form, and Zod. Here is the code snippet for the form component: 'use client'; import { z } from "zod"; import { useRef } from "react"; import { u ...

Currently in the process of upgrading from React Hook Form V6 to V7. Managed to successfully update, but encountering some issues with a few tests now. The specific error message being displayed is: TypeError: Cannot destructure property 'ref' of 'register ...

When a user registers, my backend checks if the email and/or username provided are already in use by another user. The response from Axios catch error is logged into the web console. I want to associate each email and username with their respective fields ...

Struggling with managing user input in the code snippet provided. I can't seem to restrict the number of digits a user can enter into a text field while also controlling the type of input. If I remove type: "number", then I am able to contr ...

I've hit a wall with React Hook Form phone masking and validation. Any assistance would be greatly appreciated! My setup involves using React Hook Form with Yup for form validation and MUI for UI. I managed to implement masking on my phone field usin ...

I recently updated my react-hook-forms from version 6 to version 7. Following the instructions in the migration guide, I made changes to the register method. However, after making these changes, I encountered the following error: The argument being pass ...

When validating a Material UI KeyboardDatePicker using react-hook-form, I ran into an issue: <Controller name="endDate" control={control} defaultValue={new Date()} rules={{ required: "End date is required" }} render={({ field, fieldState }) => { retu ...

Currently facing challenges with managing an autocomplete MUI component using the <controller> component in react-hook-form. Take a look at the code snippet below: <Controller control={control} name="rooms" render={({ field }) =&g ...

I am facing an issue with a parent component (Membership) that includes a child component (AboutYou). The parent component handles form submission using a button, which also triggers a reset action. The AboutYou child component contains a React-Select inp ...

When developing my React application with React hooks forms, I have a select component where I need to include a clear indicator 'x' icon next to the dropdown icon. The current select component code is: <Form.Control size="sm" as=&q ...

I've been trying to utilize the react-password-checklist library to inform users if their password complies with the rules set in zod's schemaUser. However, I'm facing challenges in implementing this feature successfully. Note: I am using zod for field val ...

I've been experimenting with using react-responsive-modal and then switching to react-modal, but I'm encountering the same issue. Additionally, all my forms are built using react-hook-form. The problem arises when I have one modal triggering another. The ...

I am currently working with Material UI Autocomplete and react-hook-form to create a modal, but I am facing an issue where I cannot display a value and change it simultaneously. If I pass the default value to InputValue, it appears on the screen but canno ...

Make sure to use react-hook-form version 7.11.1 for this task. I have a basic control that should display multiple error messages for a single validation rule when it is invalid. When registering this control, I include a custom validation function in the ...

Currently, I have implemented react-hook-forms for handling form functionality and validation in our application. On the other hand, we are utilizing MUI/Material-UI as our component library. One issue that arises is that MUI automatically adds a * to inpu ...

Currently, I am experimenting with the Mui date and time picker in an attempt to disable minutes and seconds. By using minuteStep={60}, I have successfully disabled the minute selection. However, there is no option to disable the seconds and as a result, t ...

Currently, I am tackling the react hook form with typescript and facing a challenge with my data structure which involves arrays within an array. To address this, I decided to implement the useFieldArray functionality. allName: [ { name: "us ...

I'm currently working on a form for a client where one of the questions requires the user to select checkboxes (or multiple checkboxes). I'm still learning about zod's schema so I'm facing some challenges in implementing this feature. I have experimented w ...

My customer registration form is causing all my error messages to show as "required." I suspect it might be a misconfiguration in zod or react-hook-form. Below, you'll find the code snippets. This is my generic input component: import { DetailedHTMLP ...

Hey there amazing developers! I need some help with a query. When using useQuery, the imported values can be undefined which makes it tricky to apply them as defaultValues. Does anyone have a good solution for this? Maybe something like this would work. ...

Below is the code snippet in question: type FormValues = { files: File[]; notify: string[]; }; const validationSchema = yup.object({ files: yup .array<File[]>() .of( yup .mixed<File>() .required() .t ...

Following the documentation and various online resources for help, I've attempted to implement the latest code version without success. Feeling extremely frustrated at this point. const { control, handleSubmit } = useForm() The component being retur ...

I am facing an issue with my Button that triggers a MUI Dialog to open. Within the Dialog, there is a MUI Stepper as part of my form which has different required and non-required inputs. //Sample Input <Controller name="stateName" co ...

As a newcomer to React, I need some help clarifying this issue. I want to deselect one radio button when another is selected in a specific section. Currently, I am utilizing Material UI's RadioGroup component. For any necessary code changes, please refer ...

Struggling to retrieve the value of authorId using the getValues function from react-hook-form within a child component. Despite clicking on "Print Values", the value remains inaccessible. Any suggestions? Below are the snippets for the two components: co ...

I devised a feature in my form that generates additional input fields if the user selects 'yes'. How can I make these input fields mandatory and display a warning message when 'yes' is selected? const FormSchema = z.object({ type: z.e ...

I have a React app with two address forms on one page. Each form has its own save address function that stores the address in the database. There is a single submit button that submits both fields and redirects to the next page (The plus button in the circ ...

I have a server action function that looks like this: export const sendResetEmail = async (values: FieldValues) => { const user = await prismadb.user.findUnique({ where: { email: values?.email, }, }); if (!user) { throw new Erro ...

Having an issue with React Hook Form and Material-UI file uploading. When submitting the form, I receive a string path of one file instead of FileList instance. <Controller name='attachments' control={control} defau ...

Recently, I created a unique Select component utilizing useState and onChange. I attempted to integrate this custom component with the powerful react-hook-form. Allow me to share the code snippet for the bespoke Select component. const Select = forwardRef ...

After reviewing the responses below, I have updated my code as follows: import { useState } from "react"; import Head from "next/head"; import Link from "next/link"; import Image from "next/image"; import Background ...

I've encountered an issue when submitting a form created using React Hook Form and material-ui checkboxes components. This form generates the number of checkboxes based on a list fetched from my API: <Grid item xs={12}> <F ...

TL;DR To see the working code, visit: https://codesandbox.io/s/stoic-beaver-ucydi The refactored version using React Hook Form can be found here: https://codesandbox.io/s/objective-cloud-bkunr?file=/src/ControlledTextField.tsx In Depth Explanation No Re ...

const [userInfo, setUserInfo] = useState({ fullName: "", email: "", }); // State for user information const handleChange = (event) => { console.log(event.target.value); }; // Function to handle input changes <Grid contain ...

I am facing an issue with one field in my form, endTimeMins, as it is not registering in the formState. I have a total of four fields, and all of them are properly recognized as dirty except for the endTimeMins field. It is worth mentioning that I am utili ...

Currently, I am in the process of creating a form that includes JoyUI (material) autocomplete and react-hook-form functionality. The array of objects I am using for my options looks like this: [ { label: "Todo", param: "TODO" }, ...

Currently, I am in the process of creating a custom UI library using Vite that acts as a simple wrapper for ShadCN Uis components. While everything works smoothly when utilizing the library within pages router components in a couple of NextJS apps, import ...

Currently, I'm working on incorporating a form using the react-hook-form library. Despite following the documentation and utilizing the handleSubmit function along with a custom Axios post for the onSubmit parameter like this: onSubmit={handleSubmit(onSub ...

Currently, I am working on a project where I am utilizing React and MUI. Within my forms, I have implemented the useForm hook from react-hook-form. Here is a snippet of how I am using it: React.useEffect(() => { const defaultValues = new Provider(); ...

Currently, I am facing an issue with assigning default values to a form that utilizes material UI and react-hook-form for managing the form. The problem lies in the fact that select fields do not get assigned values, and even when they do, the labels of Te ...

I've been struggling for a long time to make this validation work correctly, but it seems impossible. I even added some text at the bottom to display an error message related to the email, but it always shows no error, regardless of the situation. Edit: S ...

I am currently utilizing React Hook Form to facilitate the process of editing/updating data. I retrieve my data from zustand with a value type of any, and then proceed to save it as the defaultValue in React Hook Form. However, when attempting to acquire v ...

import { ReactNode, DetailedHTMLProps, FormHTMLAttributes } from "react"; import { FieldValues, SubmitHandler, useForm, UseFormReturn, } from "react-hook-form"; // I am looking to incorporate the DetailedHTMLProps<FormHTMLAt ...

My issue is that the password validation message is not being triggered when I enter only letters or numbers in the password field. Ideally, I want the validation message to show if the password is not alphanumeric. I am currently using react-hook ...

Struggling to save the chosen value from MUI Button Group into react-hook-form's state, but encountering challenges with the update not happening correctly. view codesandbox example Below is a simplified version of my code: import { ButtonGroup, But ...

I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...

I've utilized the controller component from react-hook-form to trigger the material UI autocomplete feature successfully. However, when I include a defaultValue parameter and then click on the submit button, an error message appears indicating validation ...

Using React Hook Form in conjunction with Material UI and I'm seeking guidance on how to set the initial value of my MUI radio button. Currently, I can select the initial value but it fails to set the form value; instead, it returns undefined unless I ...