I'm trying to compare 2 number inputs with yup validation. One of the names is number1 and the other is number2. number2 must be greater than or equal to number1 and number1 must be less than or equal to number2.…
In the input I bind its value to the React.useState() value={state}. but for some reason, when submitting, data always contains the original value, even if the state has changed. However, the input itself sees the change in the state. But…
With React Hook Form, I want to redirect user to /Page2 on Submit. However, for some reason, I am getting redirected to http://localhost:3000/#/ I have event.preventDefault(), but still not sure why the redirect is happening to / and not to…
I'm new to formik. i searched couple of times and didn't find a working solution. so i need your help to resolve this issue. my formik form as below, <Form> <div> <div> <div> <Field type="text" id="firstName" name="firstName" className="form-control" placeholder="First Name"…
I'm new to React and js in general and I'm following a crash course on React on got stuck on this error at some point in the course, and I'm getting this error for the preventDefault method that I have…
I have a form <Form onSubmit={handleSubmit(applyFilter)}> <FormLabel>Organization</FormLabel> <Controller name="Units" control={control} render={({ field }) => <Select {...field} placeholder={translate("Select organization")} options={filterModel.data?.units.map(unit => { return { label: unit.name, value: unit.id } })} isMulti closeMenuOnSelect={false} /> }/> </Form> But i have an error when…
I have a CDOB component and a DOB component that are using Mds form elements and react-hook-form's useFormContext. I want to write a test case for the useFormContext methods such as watch. Here is the code for the components: export…
I'm making a register form with react-hook-form. I use useRef to compare "password" and "password_confirm". I know that useRef is used to variable commonly. and the lecture that I heard let me this way. const { register, handleSubmit, watch, formState:…
I want to display default value for my Textfield. In this case I want to create the form when users will can update their profile but I need to display current data like name. Look at this simple example: const…
I would like to have a custom component for a password input with eye icon, as follows: type FormValues = { email: string; fullName: string; password: string; confirmPassword: string; }; type PasswordInputProps = { name: string; value: string; register: UseFormRegister<FormValues>;…