我想在安装表单时显示字段错误。提交后不行。

Yup:

const validation = Yup.object().shape({
  field: Yup.string().required('Required')
});

Formik:

<Formik
  initialValues={initialValues}
  validationSchema={validation}
  validateOnMount
>
  ...
</Formik>

感谢帮助！

简单的答案是

Pass initialTouched to Formik这将是一个对象，其中包含要显示错误消息的字段的键和值true对于那些钥匙。

e.g.

<Formik
  initialValues={initialValues}
  initialTouched={{ 
    field: true,
  }}
  validationSchema={validation}
  validateOnMount
>
  ...
</Formik>

但是有很多方法可以做到这一点，但是您可以创建一个调用的组件validateForm在初始渲染上

const ValidateOnMount = () => {
    const { validateForm } = useFormikContext()

    React.useEffect(() => {
        validateForm()
    }, [])

    // the return doesn't matter, it can return anything you want
    return <></>
}

您也可以使用同样的方法validateOnMount和设置initialTouched在您想要显示错误消息的所有字段上设置为 true （也许您只想在初始安装时显示某些字段的错误消息）。

<Formik 
    validateOnMount
    initialValues={initialValues}
    validationSchema={validation}
    initialTouched={{ 
        field: true
    }}
    {...rest}
>
</Formik>

Where initialTouched应该是一个对象，其中包含您要验证的所有字段的键initialValues但随着价值true，这意味着您已经触及该领域。

另一种方法是仅通过validateOnMount to Formik并显示任何错误消息而不检查touched[name].
如果你使用ErrorMessage from formik，它不会工作，因为它检查touched[name] === true显示消息，因此您需要创建自己的显示错误的方式，但仅检查errors[name].