Questions tagged [react-hook-form]

React form library using hooks

Filter by
Sorted by
Tagged with
1vote
0answers
32views

how do I replace number a dot (.) with a comma (,) using react-hook-form

I am developing a German app and they do not use dots (20.00) in numbers, they use commas (20,00). Using react-hook-form, how do I replace the dot without converting my numbers to strings? ...
user avatar
0votes
0answers
15views

Adjusting Schema based on another value

I have the following schema whereby I have an optionSchema which may or may not contain a subQuestion. Based on what is selected in my optionSchema via the selectedOptionId and if the selected option ...
user avatar
  • 10.9k
0votes
0answers
9views

React Hook Form is Dirty when using MUI Autocomplete component

I'm using React-Hook-Form together with Material-UI (MUI). The isDirty flag just works fine, except when I have a Autocomplete component in my form. I dont need to modify the autocomplete itself, it ...
user avatar
  • 723
1vote
0answers
22views

React-hook-form validation - IsValid prop keeps returning false

I have a fairly complex form using React-Hook-Form. I am unable to get the validation to work correctly. The zod library validation schema is as such: // For the form to be valid, // Atleast 2 goal ...
user avatar
  • 12.3k
0votes
0answers
13views

How to delete chips inside Autocomplete multiple input field with react-hook-form and Mui

As written on the title I have a problem to eliminate the chips inside a multiple input of MUI, using react-hook-form and the Controller component. I can only reset the value, but not remove the ...
user avatar
0votes
0answers
31views

FormContext returns 'null' inside SimpleForm on local

Hoping someone can point me in the right direction to try to debug this issue. I'm refactoring an application built with react-admin to version 4.0.0.beta-3. But none of my custom forms are working ...
user avatar
0votes
4answers
56views

Change state of something from another class with a button

I am new to React and have had some hard time to understand the concept of states. Down below I export a stepper from MUI. I use state export default function CustomizedSteppers() { const steps = ['...
user avatar
  • 103
0votes
1answer
22views

React hook form - all fields are mandatory if any of the field is filled else optional

React hook form - form is completely optional or completely mandatory (if any of the field is filled). Please help the optimized way. Thanks.
user avatar
  • 495
0votes
0answers
40views

Yup email confirmation validation

I have the following schema: const mapToYupKey = (keyName: string): string => keyName.replace(".", "$"); const USER_EMAIL = mapToYupKey("user.email"); const ...
user avatar
  • 4,949
0votes
1answer
36views

Add a comment without refreshing the page: useEffect used as componentDidUpdate in functional components

I have a comments section, where when I write a comment, it's stored in the React-Redux. I expected that once written it'll automatically show up in the comments section, but it does not work. Instead ...
user avatar
  • 11
0votes
0answers
26views

How to handle Material UI inputs with React-hook-form?

I'm working on a dynamic form where you can add and remove fields at will using React-hook-form. For this I made a table component where the input will be held. This is how it looks. import {...
user avatar
  • 28
0votes
0answers
14views

Yup optional field validate number - React Hook Form

So I have this field: <input type="number" {...register('price')}> And then the resolver: { price: yup .number() .typeError('Must be numeric.') .min(1, 'Minimum $...
user avatar
  • 2,357
0votes
0answers
11views

Moving from v4 to v5 broke my CleaveJS controlled TextField implementation, and I can't figure out how to fix it

Fiddle: https://codesandbox.io/s/priceless-bohr-x04cjf?file=/src/App.js const CleaveField:FC<FormFieldProps> = (props) => { const {onBlur = null, display, inputProps, InputProps, control, ...
user avatar
0votes
0answers
9views

Select all checkboxes in react-hook-form

I have the following code: const selectAll = watch('selectAll') <div className="flex space-x-4 items-center "> <input type="checkbox" value=...
user avatar
0votes
1answer
19views

How to press a next button and focus another text field input?

Version react hook form ^7.27.0 What I tried to follow and without successful react hook form - Discussions 7818 react hook form - Issues 230 About what I have I have 4 text field components at my ...
user avatar
0votes
1answer
33views

How to prevent triggered all forms inside a map at the same time using react hook form?

How to handle multiple forms in .map in reactjs using react-hook-form? the problem is when I click the button all forms get triggered and show errors like in this image Image Error , and the thing is ...
user avatar
0votes
1answer
19views

React Hook form with Dynamic key names creates huge array instead

I am working on creating form inputs, where the IDs of the inputs match an item id from the backend data. I need to keep track of the dynamic IDs, so I want the name of the fields to match also. How ...
user avatar
  • 1,796
0votes
0answers
28views

Use generic passed to useForm in custom controller component

Using react-hook-form I'm trying to make a custom ControlledTextField component to work with my component library. Following the typescript usage for userForm I can create my form like this export ...
user avatar
  • 2,083
0votes
0answers
9views

React Hook Form Validation Problem with Filled Form with Fetched Values

For my react app, I need a 'Update Article' component. I am initially filling the form with fetching the values from the existing article in backend. But when I click Submit button without changing ...
user avatar
0votes
1answer
27views

React Hook Form : how to customize Controller's sent value

I'm using React and Antd with React-Hook-Form (Controller) and I'm looking for a solution to customize my Controller response when I click on submit button : With Antd : the multiple select mode sent ...
user avatar
  • 91
0votes
0answers
22views

How to validate array of object inside array using Yup

Like in my case I want to validation a form which is inside array of array. below is the schema. var model = { template_name: "", severityLevels: [ severity_id: 0, level_name: "&...
user avatar
0votes
1answer
20views

Next.js form reCAPTCHA returns window of undefined - react-hook-recaptcha

I am trying to implement reCAPTCHA using the react-hook-form in combination with react-hook-recaptcha Not sure what is the reason but I am getting the following error for window saying it's undefined: ...
user avatar
  • 1,035
0votes
2answers
111views
+50

React Hook Form and persistent data on page reload

I'm using React Hook Form v7 and I'm trying to make my data form persistent on page reload. I read the official RHF documentation which suggests to use little state machine and I tried to implement it ...
user avatar
  • 367
0votes
1answer
25views

React hook form + Modal + data-bs-dismiss

I want to use a tailwind modal, who open & close with data-bs-dismiss argument. I put on my button : data-bs-dismiss='modal' But with react hook form, it's doesn't work like i want. If the form ...
user avatar
0votes
0answers
28views

How is it possible to use react-hook-form with react-datepicker select range?

I want to select a time range with react-datepicker, and also use react-hook-form to validate when onBlur without input, here is my code: <Controller control={control} name='time' rules=...
user avatar
0votes
0answers
16views

Conditional yup requirement based on a state

I am implementing a condition based on the value on selectCategory which is a react state hook, useState , like this: maxavailability: yup .number() .positive() .nullable(true) ...
user avatar
  • 197
0votes
0answers
23views

Custom input component field data not updating after submit in react-hook-form

I'm building a basic custom component for input masking (rolling my own!), which returns an input field for a form. import React, { useState, useEffect, useRef } from "react"; import mask ...
user avatar
  • 1,251
0votes
0answers
20views

React Hook Form and Antd: how to change the sent value of my multiple Antd Select

I'm working in a React app with Antd and React Hook Form, I want to edit te sent value of my React-Hook-Form, I'm using Controller, This is my code: <Controller control={control} ...
user avatar
  • 91
0votes
1answer
29views

Issue to handle React-Hook-Form errors object in combination with es6 literal templates

The code below shows a table where I have a series of rows and columns based on the following arrays: const weekDays = [ "Monday", "Tuesday", "Wednesday", "...
user avatar
  • 428
0votes
0answers
34views

Why the input is slow here with react-hook-form, what should be optimized?

Here I showed the component. On every input it goes to filter some data and provide options for select. Though on change function uses useMemo, but still there is a little speed lag while I type into ...
user avatar
1vote
1answer
79views

React Hook Form with MUI Autocomplete, FreeSolo and dependent fields

I'm trying to create ZipCode / City / State (in Italian CAP / Città / Provincia) dependent fields from this JSON file (here's the repo as well). I'm using React Hook Form v7 and MUI v5.4.4. I'd like ...
user avatar
  • 367
0votes
1answer
48views

React Hook Form value is not changing when swapping or Deleting Groups

I'm making a nested form builder that is dynamic. This is the current project I'm working on: https://codesandbox.io/s/ava-dynamic-react-hook-form-ivgt40?file=/src/App.js The issue I'm having is that ...
user avatar
1vote
1answer
40views

How can I get an empty field when I click on the append using the useFieldArray of React-hook-form?

Whenever I click on the append button, the generated field value printed as a [object object] but I want to get a blank field. I want to output like this : "fieldName" : ["value1",&...
user avatar
1vote
1answer
28views

How To implement ReactFlagsSelect with React Hook Form Controller

I tried to implement with React Hook From using <Controller />. While I am submitting the form country field return undefined. <Controller name="country" control={control} ...
user avatar
0votes
1answer
37views

react-phone-number-input validation failure

I am trying to avoid submitting react form if any input errors occurs. But only for the phone number input field's validations which is handled by react-phone-number-input package I am having issues ...
user avatar
  • 131
0votes
0answers
12views

React hook form's FieldArray crashes app when deleting item

I made a dynamic input table component with react-hook-form. You are able to add, remove and edit fields in the table. Here's how it looks like import {useFieldArray, useFormContext} from "react-...
user avatar
  • 28
0votes
0answers
18views

react hook form not rearranging onSubmit data when input fields changed order

I'm trying to implement react-hook-form with react-sortablejs, but when I rearrange the input field order the order of the submitted data is not updated. I'm using Next.js with Chakra.ui. Some help ...
user avatar
  • 23
2votes
1answer
23views

React hook error is returning an empty object

I want to display the error message on the paragraph element, but the error (message) returns an empty object. Here's the code import React, { useState } from "react"; import { useForm } ...
user avatar
  • 21
0votes
1answer
17views

React-useForm : No formData are sent on the first request with react-query

As the title mention, I tried to combine react-query and react-useform. but somehow, form data that are handled by use-form is empty when i tried to send them via api reques. I know there should be ...
user avatar
  • 3
0votes
2answers
29views

How to pass initial values to child components through react-hook-forms

I'm trying to pass initial values to a form (like for instance after calling an API and filling up the form). My concern is when filling values to child components (YearSelect). The code below works ...
user avatar
  • 1,017
1vote
0answers
24views

ReCaptcha missing styling on every Apple Devices

Hi every I hope your doing well, I'm having an issue with my re-captcha and some how the missing styling it happens on every IOS Devices while all the desktop browsers(linux, windows and mac) and ...
user avatar
1vote
0answers
39views

React-select Async Multi-select : How to set default selected values?

how do I set React-select Async Multi-select default selected values? Here is my form using react-hook-form and react-select: <form onSubmit={handleSubmit(onSubmit)} > {updateError &&...
user avatar
  • 133
0votes
0answers
12views

Passing Checkbox value via react-hook-form v5 Controller

I am working on a website that has been built with react-hook-form v5 and am coming across issues with passing the value of Checkbox via submit where it is sent as undefined. Here is the code - Form....
user avatar
1vote
0answers
39views

MUI: The `getOptionLabel` method of Autocomplete returned undefined instead of a string for ""

I'm having problems with AutoComplete from MUI using react-hook-form I followed the instruction from mui here but it's not working now, i have tried to remove value={value} from autoComplete and it ...
user avatar
  • 87
0votes
1answer
56views

React hook form - do not revalidate on submit

I have 2 TextField with the following use case: (note: fields are filled in with a scanner) enter any text in Part number en press ENTER (async validation runs for part number) enter any text in ...
user avatar
  • 2,578
0votes
0answers
23views

getValues('field') returns undefined combined with Form.List field array

When combining getValues and Form.List, getValues('names') returns undefined instead of the array itself. I also tried to setValue of the array on input change: <Form.List> <Input ...
user avatar
0votes
0answers
17views

Yup Validation conditionally add custom made method

I am new to yup validations and reactjs. I have defined a method using yup.addMethod() yup.addMethod(yup.array, "unique", function (message, path) { return this.test(&...
user avatar
  • 717
1vote
1answer
37views

React UseHookForm set focus when using useFieldArray

We have a pretty basic form that has a dynamic number of inputs. The number of inputs is being passed in as a prop to our SerialsForm component. We would like to set focus on the first input when this ...
user avatar
  • 85
1vote
1answer
39views

TypeError: event.preventDefault is not a function on React Hook Form using Formcarry

How can i validate this form with React Hook Form and Formcarry ? I think I missed something or there is a logic error Here is my code: import { useForm } from "react-hook-form"; import { ...
user avatar
  • 21
0votes
0answers
34views

TS: custom onSubmit do not match React Hook Form types

I'm geting type's problems when I try to use SubmitHandler type to typping onSubmit prop, I'm getting: TS2345: Argument of type 'SubmitHandler<T>' is not assignable to parameter of type '...
user avatar

15 30 50 per page
1
2 3 4 5
27