Estoy usando react-hook-form con yup para la validación de mi formulario y quiero que algunos campos sean opcionales (nulo).
Siguiendo su documentación, estoy usando nullable() y optional() pero aún se está validando:
export const updateAddressSchema = yup.object({ address: yup .string() .nullable() .optional() .min(5, "Address must be more than 5 characters long") .max(255, "Address must be less than 255 characters long"), city: yup .string() .nullable() .optional() .max(32, "City name must be less than 32 characters long"), postal_code: yup .string() .nullable() .optional() .length(10, "Postal code must be 10 characters long"), phone: yup .string() .nullable() .optional() .min(10, "Phone number must be more than 10 characters long") .max(20, "Phone number must be less than 20 characters long"), });¿Hay alguna manera correcta de hacer esto?
Debe usar .when para una validación condicional como esta a continuación. He agregado solo para address y city , puede agregar para otros como este.
export const updateAddressSchema = yup.object().shape({ address: yup.string().when("address", (val, schema) => { if (val) { if(val.length > 0) { //if address exist then apply min max else not return yup.string().min(5, "min 5").max(255, "max 255").required("Required"); } else { return yup.string().notRequired(); } } else { return yup.string().notRequired(); } }), city: yup.string().when("city", (val, schema) => { if (val) { if(val.length > 0) { return yup.string().max(32, "max 32").required("Required"); } else { return yup.string().notRequired(); } } else { return yup.string().notRequired(); } }), }, [ ["address", "address"], ["city", "city"], ] //cyclic dependency );Además, debe agregar la dependencia cíclica .
¡Muchas gracias a @Usama por su respuesta y solución!
Experimenté otro problema al usar su solución. Mi API de back-end ignora los valores nulos y devuelve el valor anterior si se envían valores nulos. El problema era que en el procesamiento inicial, el valor del campo de texto era nulo, pero después de seleccionar y escribir y luego eliminar las letras escritas para dejarlo vacío nuevamente (sin enviar), su valor cambiaría a una cadena vacía y mi API arrojaría un error. y no actualizaría la información del usuario.
La forma en que logré solucionarlo fue usar el método .transform() de yup para transformar el tipo de cadena vacía a nulo si el campo de texto no estaba lleno:
export const updateAddressSchema = yup.object().shape( { address: yup.string().when("address", (value) => { if (value) { return yup .string() .min(5, "Address must be more than 5 characters long") .max(255, "Address must be less than 255 characters long"); } else { return yup .string() .transform((value, originalValue) => { // Convert empty values to null if (!value) { return null; } return originalValue; }) .nullable() .optional(); } }), ...................... }, [ ["address", "address"], ......................, ] );Realmente espero que esto ayude a alguien.