Tengo un campo de correo electrónico que solo se muestra si se selecciona una casilla de verificación (el valor booleano es true ). Cuando se envía el formulario, solo se requiere este campo si la casilla de verificación está marcada (el valor booleano es verdadero).
Esto es lo que he probado hasta ahora:
const validationSchema = yup.object().shape({ email: yup .string() .email() .label('Email') .when('showEmail', { is: true, then: yup.string().required('Must enter email address'), }), })Probé varias otras variaciones, pero recibo errores de Formik y Yup:
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.es6.js:6198) at formik.es6.js:5933 at <anonymous> yupToFormErrors @ formik.es6.js:6198
Y también recibo errores de validación de Yup. ¿Qué estoy haciendo mal?
Probablemente no esté definiendo una regla de validación para el campo showEmail .
Hice un CodeSandox para probarlo y tan pronto como agregué:
showEmail: yup.boolean()El formulario comenzó la validación correctamente y no se arrojó ningún error.
Esta es la url: https://codesandbox.io/s/74z4px0k8q
Y para el futuro, este fue el esquema de validación correcto:
validationSchema={yup.object().shape({ showEmail: yup.boolean(), email: yup .string() .email() .when("showEmail", { is: true, then: yup.string().required("Must enter email address") }) }) }Formik autor aquí...
Para hacer que Yup.when funcione correctamente, debe agregar showEmail a initialValues y a su forma de esquema Yup.
En general, cuando se usa el esquema de validationSchema , las mejores prácticas son asegurarse de que todos los campos de su formulario tengan valores iniciales para que Yup pueda verlos de inmediato.
El resultado se vería así:
<Formik initialValues={{ email: '', showEmail: false }} validationSchema={Yup.object().shape({ showEmail: Yup.boolean(), email: Yup .string() .email() .when("showEmail", { is: true, then: Yup.string().required("Must enter email address") }) }) } />Totalmente de acuerdo con la respuesta de @João Cunha. Solo un complemento para el caso de uso del botón de opción.
Cuando usamos el botón de opción como condición, podemos verificar el valor de la cadena en lugar de booleano. por ejemplo is: 'Phone'
const ValidationSchema = Yup.object().shape({ // This is the radio button. preferredContact: Yup.string() .required('Preferred contact is required.'), // This is the input field. contactPhone: Yup.string() .when('preferredContact', { is: 'Phone', then: Yup.string() .required('Phone number is required.'), }), // This is another input field. contactEmail: Yup.string() .when('preferredContact', { is: 'Email', then: Yup.string() .email('Please use a valid email address.') .required('Email address is required.'), }), });Este botón de radio escrito en ReactJS, el método onChange es la clave para activar la verificación de condiciones.
<label> <input name="preferredContact" type="radio" value="Email" checked={this.state.preferredContact == 'Email'} onChange={() => this.handleRadioButtonChange('Email', setFieldValue)} /> Email </label> <label> <input name="preferredContact" type="radio" value="Phone" checked={this.state.preferredContact == 'Phone'} onChange={() => this.handleRadioButtonChange('Phone', setFieldValue)} /> Phone </label>Y aquí está la función de devolución de llamada cuando se cambia el botón de opción. si estamos usando Formik, setFieldValue es el camino a seguir.
handleRadioButtonChange(value, setFieldValue) { this.setState({'preferredContact': value}); setFieldValue('preferredContact', value); }