menu
Channels
Team

React-Hook-Form watercooler

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

October 24, 2019 at 11:45pm
i should include that in the docs
  • reply
  • like
will do
like-fill
1
  • reply
  • like

October 28, 2019 at 2:15am
Hi all, when I have multiple validations, for example minLength on an optional field, how do I achieve this with the in-built validation function? I need minLength to validate only if the field isn't empty.
  • reply
  • like
check out the validate function
  • reply
  • like
at the bottom of the talbe
  • reply
  • like
you can have multiple validation rules attached to your input
  • reply
  • like
Thank you Bill
like-fill
1
  • reply
  • like
my pleasure :)
  • reply
  • like

October 31, 2019 at 9:36pm
It seems like we can only have one type of validation in rule per field. For example, I can only use one pattern rule. What if I have two patterns to validate (this is important when I need to switch rules applied conditionally). Is there a way to provide an array of validation rules?
Edited
  • reply
  • like
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
Show more messages
private
This conversation has been locked