'React-Hook-Form - defaultValues not updated are not registered
I have a form who get updated directly when an user change an input. For that, I use the onBlur method.
When I change an input from the defaultValue, it save it in the DB, but it doesn't take the whole form data with it. Some fields are 'registered' (like the field Titre) and are updated but not all of them.
I would like that every input register in the form and not only the one I changed. I need that because I use reset() in onSubmit() and it makes some field become empty.
What I'm a missing here?
const {
control,
register,
handleSubmit,
reset,
formState: { isDirty, errors },
} = useForm({
mode: "all",
});
Function to submit the form
const onSubmit = (data: any) => {
console.log(data);
for (const key in data) {
if (data[key] === undefined) data[key] = "";
}
if (!isDirty) return false;
agent.Spectacle.updateSpectacle(data)
.then(() => dispatch(updateSpectacle(id)))
.catch((error) => console.log(error))
.finally(() => reset(data));
};
This input is automatically registered:
<input
type="text"
className="form-control"
{...register("titre", { required: true, minLength: 3, disabled: isNotEditable })}
defaultValue={spectacle?.titre}
onBlur={handleSubmit(onSubmit)}
/>
This input is not automatically registered so if I update the title, 'data' will not contain any value when the function onSubmit in trigerred :
<input
type="date"
disabled={isNotEditable}
className="form-control"
defaultValue={spectacle?.date_Spectacle}
{...register("date_Spectacle")}
onBlur={handleSubmit(onSubmit)}
/>
This input works too :
<Controller
name="id_Usr"
control={control}
render={({ field: { onChange, value, onBlur } }) => (
<Select
isDisabled={isNotEditable}
isClearable={true}
isSearchable={true}
options={optionsUsers}
value={optionsUsers.find((c) => c.value === value)}
onChange={(val) => onChange(val?.value === undefined ? "" : val?.value)}
onBlur={handleSubmit(onSubmit)}
noOptionsMessage={() => "Aucun élément trouvé"}
/>
)}
rules={{ required: true }}
defaultValue={
spectacle?.id_Usr?.toString() === undefined ? "" : spectacle?.id_Usr?.toString()
}
/>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|