Question

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，但没有发现明显的地方。

Answer 1

如果要在加载表单时最初使submit按钮保持禁用状态，则可以使用Formik的{{3}}属性，如下所示：

disabled={!formik.dirty}

如果要在所有字段值都有效之前一直禁用submit按钮，则可以使用dirty : boolean，其工作方式如下：

如果没有错误（即错误对象为空），则返回true，否则返回false。

因此您可以将其用作：

disabled={!formik.isValid}

现在，如果要在所有字段均有效之前禁用提交按钮，并且如果字段值已从其初始值更改，则必须使用上述两个属性结合如下：

disabled={!(formik.isValid && formik.dirty)}

Answer 2

Formik会跟踪字段值和错误，但是会公开它们供您使用，这以前是使用render props模式通过formProps完成的，但是现在似乎已成为useFormik钩子返回的formik变量的一部分。

我建议从将初始值删除为常量开始。然后，您需要访问formik的错误对象。我还没有使用新的钩子语法来完成此操作，但是，查看文档时，我希望“ formik.errors”能够正常工作（使用渲染道具在formProps.errors中公开了该信息）。最后，应禁用提交功能，以检查是否formik.values等于初始值，或者错误对象不为空。

Answer 3

要使按钮最初处于禁用状态，只需检查触摸对象是否为空，并保持这种方式，直到所有字段均已通过!isValid验证为止

disabled={!isValid || (Object.keys(touched).length === 0 && touched.constructor === Object)}

如何最初使用Formik禁用提交按钮

3 个答案: