我如何在yup中验证对象内部的对象？

Posted 2021-04-28

我正在使用带有yup的formik来处理我的表单，我需要验证由formik设置的两个初始值对象：

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

所以这是我的验证yup模式：

  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')
  })

我如何再增加一个级别（用户/公司）？我尝试过类似的东西：

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

但是我收到：

解析错误：意外的令牌，预期为“，”

我该怎么做？

我也尝试过：

  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')
    })
  })

但是我收到：

TypeError：无法读取未定义的属性'company_name'

我的模板组件：

<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"
        />

答案

我认为您可以像这样继续嵌套它-

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(),
  }),
});

您收到此错误，因为company.company_name不是有效的密钥。如果您确实想执行类似的操作，则必须使用计算键：

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