下面是我使用formik
的React
表单验证代码。默认情况下,当表单加载时,我希望禁用提交按钮:
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.object({
firstName: Yup.string()
.max(15, "Must be 15 characters or less")
.min(3, "Must be at least 3 characters")
.required("Required"),
lastName: Yup.string()
.min(3, "Must be at least 3 characters")
.max(20, "Must be 20 characters or less")
.required("Required"),
email: Yup.string()
.email("Invalid email address")
.required("Required")
}),
onSubmit: values => {
handleSubmit(values);
}
});
我试着在我的按钮上使用这个:
disabled={!formik.isValid}
但它实际上只有在我尝试提交表单时才起作用。因此,如果我将表单留空并点击提交,所有验证错误都会显示,然后按钮被禁用。但是,它应该从一开始就被禁用。我检查了documentation,但没有看到任何明显的东西。
5条答案
按热度按时间qlzsbp2j1#
如果您希望在表单加载时保持
submit
按钮最初禁用,则可以使用Formik
的use thedirty : boolean
property,如下所示:如果你想保持
submit
按钮禁用,直到所有字段值都有效,那么你可以使用isValid: boolean
,它的工作原理如下:如果没有错误(即errors对象为空),则返回true,否则返回false。
因此,您可以将其用作:
现在,如果您希望在所有字段都有效之前禁用提交按钮,并且如果字段值已从其初始值更改,则必须结合使用上述两个属性,如下所示:
0lvr5msh2#
要初始禁用按钮,只需检查触摸对象是否为空,并保持这种状态,直到所有字段都通过
!isValid
验证ovfsdjhp3#
Formik跟踪字段值和错误,但将其公开供您使用,这过去是通过使用渲染 prop 模式的formProps完成的,但现在似乎是useFormik钩子返回的formik变量的一部分。
我建议从删除常量的初始值开始。然后你需要访问formik的error对象。我没有使用新的钩子语法来完成这一点,但是,看文档,我希望“formik.errors”能起作用(这是暴露在formProps.errors使用渲染 prop ).最后提交buttion禁用应该是一个检查,要么formik.values等于初始值,或者errors对象不为空。
ldfqzlk84#
您可以添加
validateOnMount
并将其设置为true使用on按钮
disabled={!formik.isValid}
rekjcdws5#
我在用
“formik”:“^2.2.6”
在我的例子中,我是这样做的。我对在初始化中显示验证消息中的消息不感兴趣,所以我这样做了。
我使用基于类的组件
在最后禁用按钮,直到它都是有效的。我用这个
如果这将与相同的版本,请做一个upvote。