Формик и Юп Валидация - PullRequest
Новая
       7

Формик и Юп Валидация

0 голосов
/ 09 января 2020

Так что у меня возникли небольшие проблемы с проверкой Yup и Formik в многоэтапной форме, которую я сделал. Я пытаюсь включить кнопку, когда проверка истинна, и отключить, если она снова становится ложной. Я хочу, чтобы он был ложным, пока ничего не написано, и если это так, то должно быть 2 или более символов. 

const pages = [<Page1 />, <Page2 />, <Page3 />, <Page4 />];

const SignupSchema = Yup.object().shape({
  kg: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Reqasduired"),
  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Required"),
  email: Yup.string()
    .email("Invalid email")
    .required("Required")
});

const SignUp = () => {
  const state = useSelector((state: RootState) => state);
  const dispatch = useDispatch();

  return (
    <>
      <Logo />
      <div className="signup-container">
        <Formik
          initialValues={{ kg: "", lastName: "", email: "" }}
          onSubmit={values => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
            }, 500);
          }}
          validationSchema={SignupSchema}
        >
          {({ isValid, errors, touched }) => (
            <Form>
              <LinearProgress variant="determinate" />
              <div className="questions">{pages[state]}</div>

              <button
                type="button"
                onClick={() => {
                  dispatch(decrement());
                }}
              >
                Prev
              </button>
              <button
                type="submit"
                disabled={isValid}
                onClick={() => {
                  pages.length - 1 <= state
                    ? console.log("No more pages")
                    : dispatch(increment());
                }}
              >
                Next
              </button>
            </Form>
          )}
        </Formik>
      </div>
    </>
  );
};

1 Ответ

1 голос
/ 10 января 2020

Есть две вещи, которые вы должны изменить. Сначала измените опору в кнопке отправки на disabled={!isValid}, чтобы она была отключена, когда она недействительна, вместо того, чтобы отключить ее, когда она действительна.

Затем добавьте validateOnMount опору в <Formik>, чтобы убедиться, что он проверяется при монтировании, и ваша кнопка будет отключена (если начальные значения недействительны). 

import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";

const SignupSchema = Yup.object().shape({
  kg: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Reqasduired"),
  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Required"),
  email: Yup.string()
    .email("Invalid email")
    .required("Required")
});

export default function App() {
  return (
     {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500);
      }}
      validationSchema={SignupSchema}
    >
      {props => {
        const { isValid } = props;
        return (
          
            
            
            

            
            
            

            
            
            

            
            {JSON.stringify(props, null, 2)}
); }} ); }

Или рабочая песочница .

...