Questions tagged [react-hook-form]
React form library using hooks
1,334
questions
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?
...
- 148
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 ...
- 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 ...
- 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 ...
- 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 ...
- 23
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 ...
- 21
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 = ['...
- 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.
- 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 ...
- 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 ...
- 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 {...
- 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 $...
- 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, ...
- 31
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=...
- 39
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 ...
- 253
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 ...
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 ...
- 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 ...
- 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 ...
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 ...
- 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: "&...
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:
...
- 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 ...
- 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 ...
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=...
- 21
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)
...
- 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 ...
- 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}
...
- 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",
"...
- 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 ...
- 91
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 ...
- 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 ...
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",&...
- 138
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}
...
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 ...
- 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-...
- 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 ...
- 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 } ...
- 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 ...
- 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 ...
- 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 ...
- 61
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 &&...
- 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....
- 55
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 ...
- 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 ...
- 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 ...
- 5,661
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(&...
- 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 ...
- 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 { ...
- 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 '...
- 1,220