menu
Channels
Team

React-Hook-Form watercooler

July 31, 2019 at 1:06am
Show previous messages

November 7, 2019 at 5:41am
How do I change the style/className of input when an error is displayed?
  • reply
  • like
The method I'm using right now is not very good is there a right way?
  • reply
  • like
nope, it is included in the document in the register part of API section.
  • reply
  • like

November 7, 2019 at 10:00pm
like-fill
1
  • reply
  • like
thanks, I'll look it
  • reply
  • like

November 29, 2019 at 10:36am
Hey I've problems with ref + bootstrap + typescript I've created a bug https://github.com/react-hook-form/react-hook-form/issues/598
  • reply
  • like

December 4, 2019 at 5:39pm
Hi all, I am considering this library for use in the project were we have several custom components which don't expose refs so idea is to use setValue function when value changes like ReactSelect is used in the example:
From the example: We track components state manually:
const [values, setReactSelect] = useState({
selectedOption: []
});
Then change handler is defined and it needs to call two state update functions:
const handleMultiChange = selectedOption => {
setValue("reactSelect", selectedOption);
setReactSelect({ selectedOption });
};
And finally we use component like:
<Select
className="reactSelect"
name="filters"
placeholder="Filters"
value={values.selectedOption}
options={options}
onChange={handleMultiChange}
isMulti
/>
This seems like a lot of extra work, especially if you have 10 such components on the form.
My question is can we use something like this:
<Select
className="reactSelect"
name="filters"
placeholder="Filters"
value={watch("reactSelect")}
options={options}
onChange={handleMultiChange}
isMulti
/>
or this:
<Select
className="reactSelect"
name="filters"
placeholder="Filters"
value={getValues().reactSelect}
options={options}
onChange={handleMultiChange}
isMulti
/>
or is there some other solution?
Thanks, Milos
  • reply
  • like

December 5, 2019 at 1:03am
Have you tried using the wrapper component?
like-fill
1
  • reply
  • like
Try searching for react-hook-form-input
like-fill
2
  • reply
  • like

December 5, 2019 at 9:10am
Hi , thanks for the reply. I've seen that, I can give it a try although it is an extra dependency. But what do you think about solutions proposed above (watch and getValues)?
  • reply
  • like

December 6, 2019 at 2:00am
Hey guys, do you know how I could make a field required or not depending on the button that is pressed?
  • reply
  • like

December 10, 2019 at 2:58pm
Hello people, I'm having an weird issue, or maybe I'm doing something that is not correct.
  • reply
  • like
  • reply
  • like
I'm trying to reset/clear the value of the subform. But the Main form get cleared as well.
Edited
  • reply
  • like
I don't see any errors here. You can customize the reset method by passing
// retain your main form
const mainForm = {
name: "Testing",
};
// reset your form
const subForm = {
other: "",
};
reset({
...mainForm,
...subForm
});
Edited
  • reply
  • like
Thank you for replying very quick. There are not errors, but I don't want to reset the value of name, only the value of "other"
  • reply
  • like
My bad, Spectrum doesn't support multi-line by pressing "Enter"
Edited
  • reply
  • like
Please, see me my edited answer.
Edited
  • reply
  • like
Please, see me my edited answer.
Waiting for the edit :)
  • reply
  • like
I already edited it. You can refresh the page.
Edited
  • reply
  • like
In my example is not exactly like my code but I had to make it easy and sort, the subform shouldn't be aware of the mainForm, they are independent components
  • reply
  • like
the idea of the subform is to add elements to a list that belongs to the main form
  • reply
  • like
when you add it I want that subform to be cleared
  • reply
  • like
I will try with that reset, but I find it weird the second reset clear the first form
  • reply
  • like
It's not weird. That's how form works
  • reply
  • like
Show more messages
private
This conversation has been locked