web-dev-qa-db-fra.com

React validation du formulaire formik: comment désactiver initialement le bouton d'envoi

Ci-dessous se trouve mon code de validation de formulaire React dans lequel j'utilise formik. Par défaut, lorsque le formulaire se charge, je souhaite conserver le bouton d'envoi désactivé:

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);
    }
  });

J'ai essayé d'utiliser ceci sur mon bouton:

 disabled={!formik.isValid}

Mais cela ne fonctionne réellement que si j'essaie de soumettre le formulaire. Donc, si je laisse le formulaire vide et que je clique sur Soumettre, toutes les erreurs de validation s'affichent, puis le bouton est désactivé. Mais, il devrait déjà être désactivé dès le départ. J'ai vérifié la documentation mais je n'y ai rien vu d'évident.

reactjsvalidationformikyup
4
user8463989

Formik garde une trace des valeurs des champs et des erreurs, mais les expose pour votre utilisation, cela se faisait via formProps en utilisant le modèle d'accessoires de rendu, mais semble maintenant faire partie de la variable formik renvoyée par le hook useFormik.

Je recommanderais de commencer par supprimer les valeurs initiales à une constante. Ensuite, vous devez accéder à l'objet d'erreur du formik. Je n'ai pas fait cela en utilisant la nouvelle syntaxe de hook, cependant, en regardant les documents, je m'attendrais à ce que "formik.errors" fonctionne (cela est exposé dans formProps.errors en utilisant des accessoires de rendu). Enfin, le bouton d'envoi désactivé doit être une vérification que formik.values ​​est égal aux valeurs initiales OR l'objet erreurs n'est pas vide.

0
Jamie Shepherd