How I can validate object inside objects in yup?

user_12227276 0
Viewed 11262

I'm using formik with yup to treat my forms and i need to validate two objects that is setted by formik in initial values:

initialValues: {
  company: { company_name: '', cnpj: '', fantasy_name: '', state_registration: '' },
  user: { email: '', password: '' }
},
validationSchema: schema,

So this is my validation yup schema:

  const schema = Yup.object().shape({
    company_name: Yup.string().required('Informe o nome da filial!'),
    cnpj: Yup.string().required('Informe o cnpj!'),
    email: Yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
    password: Yup.string().required('Informe a senha')
  })

How i can put one more level (user/company)? I tried something like:

company.company_name: Yup.string().required('Informe o nome da filial!')

But i receive:

Parsing error: Unexpected token, expected ","

How i can do this?

I also tried:

  const schema = Yup.object().shape({
    company: Yup.object().shape({
      company_name: Yup.string().required('Informe o nome da filial!'),
      cnpj: Yup.string().required('Informe o cnpj!'),
    }),
    user: Yup.object().shape({
      email: Yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
      password: Yup.string().required('Informe a senha')
    })
  })

But i receive:

TypeError: Cannot read property 'company_name' of undefined

My template component:

<TextField
          value={formik.values.company.company_name}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur} 
          helperText={formik.touched.company.company_name ? formik.errors.company.company_name : ""}
          error={formik.touched.company && Boolean(formik.errors.company)}
          variant="outlined"
          margin="normal"
          required
          fullWidth
          id="company_name"
          label="Razão social"
          name="company_name"
        />
yup formik reactjs
2 Answers

I think you can continue to nest it like so - 

const schema = Yup.object().shape({
  company: Yup.object().shape({
    company_name: Yup.string.required(),
    // etc
  }),
  user: Yup.object().shape({
    email: Yup.string.required(),
    password: Yup.string.required(),
  }),
});

You were getting that error because company.company_name isn't a valid key. If you did want to do something like that you would have to use a computed key:

['company.company_name']: 'Company Name'

user_60794120

Try using this way it works for me:

const schema = yup.object({
    company: yup.object({
        company_name: yup.string().required('Informe o nome da filial!'),
        cnpj: yup.string().required('Informe o cnpj!'),
    }),
    user: yup.object({
        email: yup.string().email('Email não possui formato válido').required('Informe o e-mail'),
        password: yup.string().required('Informe a senha')
    })
});



<TextField required fullWidth variant="outlined" margin="normal"
  id="company_name"
  label="Razão social"
  name="company.company_name"
  value={formik.values.company.company_name}
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
  helperText={formik.touched.company?.company_name && formik.errors.company?.company_name}
  error={formik.touched.company?.company_name && Boolean(formik.errors.company?.company_name)}

/>

user_118887200
Related