0
473
ViewsSí, validación para elementos de formulario anidados en formik
Tengo un formulario Formik anidado que tiene una casilla de verificación en cada nuevo conjunto de campos de formulario agregados. Estoy tratando de agregar validación en Yup para lograr:
- Al menos una casilla de verificación para seleccionar entre todos los conjuntos.
- No arrojar error para otras casillas de verificación si una está seleccionada.
En este momento, arroja un error para otras casillas de verificación si se selecciona una casilla de verificación en particular. Cualquiera que me pueda orientar sobre cómo prevenir esto sería de gran ayuda.
Enlace al código que he probado hasta ahora: https://codesandbox.io/s/formik-nested-form-mx15kt
·
Juan Pablo Isaza
1 answers
Answer question0
El problema se resuelve usando yup .test . Como expliqué en el comentario. También debemos eliminar oneOf([true], ...) ya que la casilla de verificación puede ser falsa ahora. Aquí está el ejemplo de trabajo
El esquema Yup:
const NestedSchema = Yup.object().shape({ dropdown1: Yup.string().required("Select dropdown 1"), groupedelements1: Yup.array().of( Yup.object().shape({ textinput: Yup.string().required("Enter text"), groupedelements2: Yup.array().of( Yup.object().shape({ dropdown2: Yup.string().required("Select dropdown 2"), checkboxinput: Yup.boolean().test( "customValidation", "Checkboxes", function (val) { var { parent, from } = this; // console.log(from); //eg from[1].value console.log(from[1].value.groupedelements2); console.log( from[1].value.groupedelements2.map( (data) => data.checkboxinput ) ); //Getting checkboxes values from groupedelements2 object const checkBoxValues = from[1].value.groupedelements2.map( (data) => data.checkboxinput ); var result = false; //looping over checkBoxValues array for (var i = 0; i < checkBoxValues.length; i++) { if (checkBoxValues[i]) { result = true; break; // if one of the checkbox is true then return true and dont validate other checkboxes } else { result = false; } } console.log(result); return result; } ) }) ) }) ) });
·
Juan Pablo Isaza
Report
Answer question