Как мне проверить радио вход в Yup / Formik?

Question

Я использую Yup для проверки формы Formik, но я не знаю, как проверять радиовход в Yup / Formik.

Answer 1

Вы подтверждаете радиогруппу . Единственный возможный сбой проверки - это если у вас не выбрана кнопка по умолчанию, а пользователь не выбирает ни одну из переключателей.

Учитывая:

<RadioButtonGroup
    id="radioGroup"
    label="One of these please"
    value={values.radioGroup}
    error={errors.radioGroup}
    touched={touched.radioGroup}
>
    <Field
        component={RadioButton}
        name="radioGroup"
        id="radioOption1"
        label="Choose this option"
    />
    <Field
        component={RadioButton}
        name="radioGroup"
        id="radioOption2"
        label="Or choose this one"
    />
</RadioButtonGroup>

Код проверки:

    radioGroup: Yup.string().required("A radio option is required")

Как используется в контексте:

<Formik
    ...
    validationSchema={Yup.object().shape({
        radioGroup: Yup.string().required("A radio option is required"),
        ...
    })}

Скопировано из этого более крупного примера проверки:

https://gist.github.com/mrtony/c1ba5f8ec4122d2866b292fc36152d34

Answer 2

Теоретически это не должно отличаться от любого другого значения. Скорее всего, вы отслеживаете значение радио (или Formik отслеживает его) где-то в вашем штате в виде строки, и вам просто нужно применить правила к сохраняемому значению.

Если выЧтобы убедиться, что значение соответствует только представленным параметрам радио, вы можете использовать oneOf , чтобы выполнить это, но в остальном оно не отличается от любого другого скалярного значения.