validation fails if the id of the field is given as json path Ex: groups['Basic'].parameters[0].name.value

Hi

Am using formik as my form library, where am giving the id of the input element is given a json path Ex: “groups[‘Basic’].parameters[0].name.value”

where form values will be generated as below:

  "values": {
    "groups": {
      "basic": {
        "parameters": [
          {
            "domain": {
              "value": "2"
            }
    } ] }

Same id is set to while creating the yup validation schema. But yup always trying get the value from form values assuming id is plain string key in form values object.

https://github.com/jquense/yup/blob/dd474ff79fb34aee5780dc0aebeac42eb6b88e48/src/object.js#L158

I think should support something like below.

if (field.validate) return field.validate(_.get(value, key), innerOptions);

Currently is there any other way or workaround to achieve the same for now?

[jquense]

you need to define schema’s at each level like:

object().shape({
  nested: object().shape({
    arr: array().of(object().shape({ num: number().max(4) })),
  }),
});

[WNemencha]

Just came into the issue too. This solution works fine except that we don’t use lodash internally. Here’s the plain JS way for future people coming into this issue (found it via Google so…)

Assuming we have such a payload where the key is dynamically created:

The following schema would allow us to make use of i.e. Formik nested objects support while keepin Yup to validate our inputs.

const dynamicFormSchema = Yup.lazy(obj =>
    Yup.object(
      Object.entries(obj).reduce(
        (a, [key]) => ({
          ...a,
          [key]: Yup.object()
            .shape({
              expected_value: Yup.string().required('Required'),
              operator: Yup.string().required('Required'),
              return_block_name: Yup.string()
                .required('Required')
                .min(3, 'Minimum 3 characters')
                .max(20, 'Maximum 20 characters')
            })
            .required()
        }),
        {}
      )
    )
  )