You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have an issue with my form where 2 fields (years and months) don't trigger the onChange mode from the useForm hook.
I'm using react-select for these search/dropdown fields. I'm also using the same for the software field, but in that case, the trigger is working fine. I'm wondering if it has something to do with the fact that the years / months field are nested under expAmount ?
constschema=Joi.object({software: Joi.object({value: Joi.string(),label: Joi.string(),}).required().messages({"any.required": "Software can't be empty","object.base": "Software can't be empty",}).label("Software"),expAmount: Joi.object({years: Joi.object({value: Joi.number(),label: Joi.number(),}).allow(null),months: Joi.object({value: Joi.number(),label: Joi.number(),}).allow(null),}).or("years","months",{isPresent: (resolved)=>resolved!==undefined&&resolved!==null,}).messages({"object.missing": "Enter at least one: years or months",}),proficiency: Joi.number().required().messages({"any.required": "Proficiency is required","number.base": "Proficiency is required",}),activelyGaining: Joi.optional(),});const{
register,
setValue,formState: { errors, isDirty },
watch,
handleSubmit,
control,}=useForm({resolver: joiResolver(schema),mode: "onChange",defaultValues: editMode
? {proficiency: expProficiency,software: {label: software.name,value: software.uuid},expAmount: {years:
expYears>0
? {label: expYears,value: expYears}
: null,months:
expMonths>0
? {label: expMonths,value: expMonths}
: null,},
activelyGaining,}
: {proficiency: null,software: null,expAmount: {years: null,months: null},activelyGaining: false,},});
My workaround is basically to add a watcher on the years and months fields and set or clear the errors manually, which is not ideal :
constexpWatcher=watch("expAmount");constdidMountRef=useRef(false);useEffect(()=>{if(didMountRef.current){if(expWatcher.years||expWatcher.months){clearErrors("expAmount");}else{setError("expAmount",{message: "Enter at least one: years or months",});}}didMountRef.current=true;},[expWatcher.years,expWatcher.months]);
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello,
I have an issue with my form where 2 fields (
years
andmonths
) don't trigger theonChange
mode from the useForm hook.I'm using react-select for these search/dropdown fields. I'm also using the same for the
software
field, but in that case, the trigger is working fine. I'm wondering if it has something to do with the fact that the years / months field are nested underexpAmount
?My workaround is basically to add a watcher on the
years
andmonths
fields and set or clear the errors manually, which is not ideal :Beta Was this translation helpful? Give feedback.
All reactions