Tengo un formulario que necesita validación donde cada fila (con 4 elementos cada una) es opcional a menos que se complete una sola. Si bien esta validación funciona, generó muchas repeticiones ya que tengo 5 filas, lo que equivale a casi 150 líneas de código repetido:
var1: Yup.date().when(['var2', 'var3', 'var4'], { is: (a: string, b: number, c: File) => a !== undefined || b !== undefined || c !== undefined, then: Yup.date().required('Please fill out var1'), }), var2: Yup.string().when(['var1', 'var3', 'var4'], { is: (a: Date, b: number, c: File) => a !== undefined || b !== undefined || c !== undefined, then: Yup.string().required('Please fill out var2'), }), var3: Yup.string().when(['var1', 'var2', 'var4'], { is: (a: Date, b: number, c: File) => a !== undefined || b !== undefined || c !== undefined, then: Yup.string().required('Please fill out var3'), }), var4: Yup.mixed() .when(['var1', 'var2', 'var3'], { is: (a: Date, b: string, c: number) => a !== undefined || b !== undefined || c !== undefined, then: Yup.mixed().required('Please fill out var4'), }) //Here the repition starts var5: Yup.date().when(['var6', 'var7', 'var8'], { is: (a: string, b: number, c: File) => a !== undefined || b !== undefined || c !== undefined, then: Yup.date().required('Please fill out var5'), }), var6: Yup.string().when(['var5', 'var7', 'var8'], { is: (a: Date, b: number, c: File) => a !== undefined || b !== undefined || c !== undefined, then: Yup.string().required('Please fill out var6'), }), var7: Yup.string().when(['var5', 'var6', 'var8'], { is: (a: Date, b: number, c: File) => a !== undefined || b !== undefined || c !== undefined, then: Yup.string().required('Please fill out var7'), }), var8: Yup.mixed() .when(['var5', 'var6', 'var7'], { is: (a: Date, b: string, c: number) => a !== undefined || b !== undefined || c !== undefined, then: Yup.mixed().required('Please fill out var8'), }) ¿Existe la posibilidad de reutilizar esos bloques, tal vez en una función y Yup.test o estoy atascado con esos bloques?
Puede refactorizar como el siguiente ejemplo de código:
const checkCondition = (a: string, b: number, c: File) => return a !== undefined || b !== undefined || c !== undefined;luego usa una función:
var5: Yup.date().when(['var6', 'var7', 'var8'], { is: checkCondition(a, b, c), then: Yup.date().required('Please fill out var5'), }),Todas las funciones similares que puede poner en el archivo utils.tsx/.js y simplemente importar/exportar.