Estoy usando Yup para verificar si el usuario ha seleccionado un campo (que se establece con el estado 'groupSelected'). (El campo es un campo obligatorio)
<Formik initialValues={{title:'', group:{groupSelected}}} enableReinitialize='true' // since we are setting the formik initial value to state, this is required to update the initial value when state changes onSubmit={values => console.log(values)} validationSchema={validationSchema}Puedo recuperar los valores seleccionados muy bien cuando se envía el formulario. Sin embargo, no estoy seguro de cómo validar si el estado realmente se ha establecido o no.
group: Yup.string().required()Intenté usar lo anterior, pero supongo que no funciona porque groupSelected no es una cadena.
Aquí está el ejemplo básico de Formik con yup . También puedes probar de esta manera.
Ejemplo:
import React from "react"; import { Formik, Form, Field } from "formik"; import * as Yup from "yup"; const SignupSchema = Yup.object().shape({ firstName: Yup.string() .trim("spaces no t allowed") .strict() .required("Required"), }); export const MyForm = () => ( <div> <h1>Signup</h1> <Formik initialValues={{ firstName: "", }} validationSchema={SignupSchema} onSubmit={(values) => { // same shape as initial values console.log(values); }} > {({ errors, values, touched, setFieldValue, registerField }) => ( <Form> <Field name="firstName" /> {errors.firstName && touched.firstName ? ( <div>{errors.firstName}</div> ) : null} <br /> {JSON.stringify(errors)} <button type="submit">Submit</button> </Form> )} </Formik> </div> );