menu

React Hook Form

📋 Custom React hooks for form validation without the hassle

Channels
Team

React-Hook-Form watercooler

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

November 1, 2019 at 1:01am
Is passing an object in validate does not work for you?
<input
name="test"
ref={
register({
validate: {
smallCasePattern: value => /[a-z]+/.test(value),
digitPattern: value => /[0-9]{2}/.test(value)
}
})
}
/>
Edited
like-fill
1
  • reply
  • like
thanks i think you miss the valdiate
like-fill
1
  • reply
  • like

November 7, 2019 at 4:53am
Thanks . The document is not clear about, validate can be an object. I thought it could only be a function.
  • reply
  • like
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
Show more messages
private
This conversation has been locked