반응 폼 검증:처음에 송신 버튼을 무효로 하는 방법

반응 폼 검증:처음에 송신 버튼을 무효로 하는 방법

아래는 나의React사용 중인 인증 코드 양식formik기본적으로는 폼이 로드될 때 [Submit]버튼을 비활성화합니다.

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}

하지만 실제로는 양식을 제출하려고 할 때만 작동합니다.따라서 폼을 공백으로 두고 [Submit]를 누르면 모든 검증 오류가 표시되고 버튼이 비활성화됩니다.단, 처음부터 이미 비활성화되어 있어야 합니다.서류를 확인했지만, 거기서 눈에 띄는 것은 보이지 않았습니다.

보관하고 싶은 경우submit처음에 폼이 로드될 때 버튼이 비활성화되어 있는 경우 다음 속성을 사용할 수 있습니다.Formik이하와 같은 것:

disabled={!formik.dirty}

보관하고 싶은 경우submit버튼은 모든 필드 값이 유효할 때까지 비활성화되며, 그 후 다음과 같이 사용할 수 있습니다.

오류가 없으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

따라서 다음과 같이 사용할 수 있습니다.

disabled={!formik.isValid}

여기서 모든 필드가 유효할 때까지 [Submit]버튼을 디세블로 하고 필드의 값이 초기값에서 변경된 경우 위의 두 Atribut을 다음과 같이 조합하여 사용해야 합니다.

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

이 버튼을 처음에 비활성화하려면 터치 객체가 비어 있는지 확인하고 모든 필드가 다음과 같이 확인될 때까지 이 상태로 유지합니다.!isValid

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

Formik은 필드 값과 오류를 추적하지만 사용자가 사용할 수 있도록 노출합니다. 이전에는 렌더링 소품 패턴을 사용하여 FormProps를 통해 수행되었지만, 현재는 useFormik 후크에 의해 반환되는 Formik 변수의 일부가 된 것 같습니다.

초기값을 상수로 제거하는 것으로 시작하는 것이 좋습니다.그런 다음 포믹의 오류 개체에 액세스해야 합니다.새로운 훅 구문을 사용한 적은 없습니다만, 「formik.errors」가 동작한다고 생각되는 문서를 참조해 주세요(이것은 렌더 소품을 사용하는 formProps.errors에 기재되어 있습니다).마지막으로 submit buttion disabled는 formik.values가 초기값과 같거나 errors 객체가 비어 있지 않은지 확인해야 합니다.

추가할 수 있습니다.validateOnMount그리고 그것을 사실로 설정한다.

const formik = useFormik({
    initialValues: {
      validateOnMount: true, // <================= Add this
      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}

사용하고 있다

"formik": "^2.2.6"

저 같은 경우에는 이렇게 했어요.저는 처음에 검증 메시지에 메시지를 표시하는 것에 관심이 없었기 때문에 이렇게 했습니다.

클래스 베이스의 컴포넌트를 사용하고 있다.

<Formik
......
validateOnBlur={true}
validateOnChange={true}

{({handleChange, values, touched, errors, handleBlur }) => (<>
    ..........
    <Form.Control
        placeholder="Name"
        type="text"
        name="field_dba"
        value={values.name}
        onChange={handleChange}
        onFocus={handleBlur} // It plays a role to change the touched property 
        isInvalid={touched.name && !!errors.name}
        isValid={!errors.name}
        className="form-input"
    />
    <label className="modal-lab">Name *</label>
    // Here i'm checking the field is touched or not 
    {touched.name ? <Form.Control.Feedback type="invalid" className="text-capitalize"> {errors.name} </Form.Control.Feedback> : null}

모든 것이 검증될 때까지 버튼을 비활성화합니다.나 이거 쓰고 있어

<button disabled={Array.isArray(errors) || Object.values(errors).toString() != ""} type="submit"> Submit </button>

같은 버전으로 동작하는 경우는, 업 투표를 실시해 주세요.

언급URL : https://stackoverflow.com/questions/59443005/react-formik-form-validation-how-to-initially-have-submit-button-disabled