formik - 如何在 Yup/Formik 中验证 radio 输入？

Question

我正在使用 Yup 来验证我的 Formik 表单，但我不知道如何在 Yup/Formik 中验证 radio 输入。

Answer 1

您验证 radio 组。唯一可能的验证失败是，如果您没有选择默认按钮，并且用户没有选择任何单选按钮。

鉴于:

<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