Formik - проверка вложенных полей

Question

У меня есть вложенные поля с числовыми значениями, и я не могу заставить проверку работать должным образом. Не уверен, что это проблема с formik или yup / как объявлена ​​схема проверки, но я начну спрашивать здесь.

В примере у меня есть два поля, которые представляют числа и по умолчанию представляют собой пустую строку. Проверка работает для первых полей, но я не могу заставить ее вести себя так же для вложенного поля. Когда я касаюсь поля, но ничего не набираю, он возвращает:

social.facebook должен иметь тип number, но окончательное значение было: NaN (приведено из значения "").

Пример: codesandbox

Answer 1

Кажется, это проблема с formik, с проверкой вложенных полей! когда его число и значение инициализируются пустой строкой, в этот последний бросок с этой ошибкой

вы можете обойти ее, преобразовав в пустую строку значение null, а затем установить его как nulllable внутри validationSchema, как показано ниже

validationSchema={Yup.object().shape({
    email: Yup.number(),
    social: Yup.object().shape({
      facebook: Yup.number()
                   .transform((value, originalValue) => originalValue.trim() === "" ? null: value)
                   .nullable()
    })
})}

См. codeSandbox

Для дальнейшей проверки, если вы хотите специальное сообщение только для номера, добавьте .typeError ("ваше сообщение")

как показано ниже:

validationSchema={Yup.object().shape({
    email: Yup.number().typeError("must be a number"),
    social: Yup.object().shape({
      facebook: Yup.number()
                   .typeError("must be a number")
                   .transform((value, originalValue) => originalValue.trim() === "" ? null: value)
                   .nullable()
    })
})}

PS: вы можете установить начальные значения как, null для чисел и добавить .nullable () к schenma.