menu
Channels
Team

React-Hook-Form watercooler

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

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
That would be hard in your case. Either you make your main form aware of the value of your sub-form or vice versa
  • reply
  • like
// main aware of sub form
function MainForm() {
const { register, handleSubmit, getValues. reset } = useForm();
const handleSubFormSubmit = data => {
// do you submission here
// then reset
const { name } = getValues({ nest: true });
const subForm = {
other: "",
};
reset({
name,
...subForm
})
};
return (
<form onSubmit={handleSubmit(console.log)}>
<input name="name" ref={register} />
<SubForm onSubmit={handleSubFormSubmit} />
</form>
);
}
  • reply
  • like
I don't think the lib has form-scope awareness feature.
  • reply
  • like
bad assumption on my side :)
  • reply
  • like
I will have to find a way because I have 30 fields or more in my form
  • reply
  • like
I just posted an example on how to achieve that :)
  • reply
  • like
doing that with 30 fields ...
  • reply
  • like
Show more messages
private
This conversation has been locked