Yup: Adding the Yup errors object to the formik errors object

Created on 12 Jul 2020  路  3Comments  路  Source: jquense/yup

I'm trying to add the Yup errors object to the formik errors object

Here's the Yup schema

const validationSchema = Yup.object({
        fullName: Yup.string().trim().required('Please type your full name.'),
        email: Yup.string().trim().email('Please enter a valid email address!').required('Please type your valid email address!!')
    }).validate({}, {abortEarly: false}).catch(errors => {
        formik.setErrors({...errors})
    })

Here's the Formik hook

const formik = useFormik({
        initialValues: {
            fullName: '',
            email: '',
            password: '',
            role: 'employer',
            companyName: '',
            companyWebsite: '',
            phoneNumber: '+971',
            currentJobRole: '',
            companyLogo: '',
            photoProfile: '',
            aboutMe: ''
        }, 
        onSubmit: values => {
            return values
        },
        validationSchema
    })

I was able to add the error object, but once I write something on the input I got this error
TypeError: schema[(intermediate value)(intermediate value)(intermediate value)] is not a function

Most helpful comment

hey @AmineIT, i figured out what my mistake was, I was enclosing the validationSchema in { } while passing that to the formik hook and also I'm now using yup.object().shape({ }). Hope it helps you

All 3 comments

getting the same error

hey @AmineIT, i figured out what my mistake was, I was enclosing the validationSchema in { } while passing that to the formik hook and also I'm now using yup.object().shape({ }). Hope it helps you

@eyeamkd Had the same ;) Thanks a lot!!

Was this page helpful?
0 / 5 - 0 ratings