问题描述

我希望在装入表单时显示字段错误。不是在提交之后。

是的：

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

Formik：

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

感谢您的帮助！

推荐答案

简单的答案是

将initialTouched传递给Formik，该对象将包含要显示错误消息的域的键以及这些键的值true。

例如

<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>

其中initialTouched应该是一个对象，该对象具有您要验证的所有字段的键，这些字段位于initialValues中，但值为true，这意味着您已经接触了该字段。