Tener este esquema de validación:
const schema = yup.object().shape({ second: yup.number(), minute: yup.number(), triggerName: yup.string().required() }); Debe requerirse triggerName, pero cuando escribo algo para la entrada de minute , la second entrada debe restablecerse y viceversa.
const { handleSubmit, register, reset } = useForm({ resolver: yupResolver(schema) });
...
<Input inputId='second' type='number' {...register('second')} /> <Input inputId='minute' type='number' {...register('minute')} /> <Input inputId='trigger-name' label='triggerName' {...register('triggerName')} />Intenté hacer algo como lo siguiente pero arroja errores:
<Input inputId='second' type='number' {...reset(), register('second')} />importe setValue desde useForm hook y configure una función onChange en la entrada, puede hacer esto para cada entrada y tener un comportamiento diferente para onChange
const { handleSubmit, setValue, register, reset } = useForm({ resolver: yupResolver(schema) }); const onChangeMyInput = (e) => { reset() setValue('second', e.target.value) } <Input {...register('second')} onChange={onChangeMyInput} inputId='second' type='number' />el register devuelve un objeto con la siguiente estructura:
{ onChange: function(){}, onBlur: function(){}, ref: function(){} } En este momento, solo está pasando el objeto que ha regresado de la función de register , pero puede agregar alguna otra funcionalidad al cambio de sus entradas como el siguiente ejemplo (aquí restablecemos uno a otro campo en el formulario llamando resetField onChange :
const Input = React.forwardRef(({ inputId, ...otherProps }, ref) => { return <input id={inputId} ref={ref} {...otherProps} />; }); const schema = yup.object().shape( { second: yup .number() .nullable() .transform((value, originalValue) => String(originalValue).trim() === '' ? null : value ), minute: yup .number() .nullable() .transform((value, originalValue) => String(originalValue).trim() === '' ? null : value ), triggerName: yup.string().required(), } ); function TestForm() { const { handleSubmit, register, formState: { errors }, resetField, } = useForm({ resolver: yupResolver(schema), }); console.log(errors); const onSubmit = (data) => { if (!data.minute && !data.second) { alert('on of minute or second field must has value'); return false; } alert('success'); console.log(data); }; const { onChange: onSecondChange, ...secodField } = register('second'); const { onChange: onMinuteChange, ...minuteField } = register('minute'); return ( <form onSubmit={handleSubmit(onSubmit)}> <Input inputId="second" type="number" {...secodField} onChange={(e) => { onSecondChange(e); resetField('minute'); }} /> <Input inputId="minute" type="number" {...minuteField} onChange={(e) => { onMinuteChange(e); resetField('second'); }} /> <Input inputId="trigger-name" label="triggerName" {...register('triggerName')} /> <input type="submit" value="submit" /> </form> ); } He validado que el minute o el second tiene valor en la función onSubmit porque no sé exactamente cuál es su negocio para llenar ambos o uno de ellos, pero si lo desea, puede manejar esta yup usando el método when o definiendo alguna regla personalizada en su esquema.