동적 검증

하고 싶은 일

Form 프로젝트의 선택 상태에 따라 필수와 비필수를 바꾸고 싶습니다.
예를 들어 애완동물을 키우면 애완동물의 이름을 필수로 삼고 싶다.안 키웠으면 필요 없어.
원래 Input를 없앤다는 말이 있지만 뒷면에 값을 정의해야 한다면 검증을 통해 오류가 발생할 수 없기 때문에 검증을 만지작거린다는 뜻이 있습니다.

방법

Yup.lazy () 함수가 있습니다. 값의 상황에서 조건 지점 같은 구조를 이용하면 됩니다.

validationSchema={Yup.lazy(values => {
if (values.pet === 'noPet') {
    return Yup.object().shape({
    email: Yup.string().required(),
    pet: Yup.string().required(),
    });
} else {
    return Yup.object().shape({
    email: Yup.string().required(),
    pet: Yup.string().required(),
    petName: Yup.string().required(),
    });
}
})}

실시

formik 같은 거 많이 알고 있는 구상.

create-react-app formik-test
cd formik-test

npm install --save bootstrap reactstrap formik yup

뭐 그런 거.index.js에서bootstrap.min.css 읽기
그럼 샘플을 쓰세요.
App.js

import React from 'react';
import './App.css';
import { Form, FormGroup, Label, Input, Button, FormFeedback } from 'reactstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';

class App extends React.Component {

  handleOnSubmit = (values) => {
    alert(JSON.stringify(values));
  }

  render() {
    return (
      <div className="container">
        <h3 className="my-5">動的バリデーションテスト</h3>
        <Formik
          initialValues={{ email: '', pet: '', petName: '' }}
          onSubmit={(values) => this.handleOnSubmit(values)}
          validationSchema={Yup.lazy(values => {
            if (values.pet === 'noPet') {
              return Yup.object().shape({
                email: Yup.string().required(),
                pet: Yup.string().required(),
              });
            } else {
              return Yup.object().shape({
                email: Yup.string().required(),
                pet: Yup.string().required(),
                petName: Yup.string().required(),
              });
            }
          })}
        >
          {
            ({ handleSubmit, handleChange, handleBlur, values, errors, touched, setFieldValue }) => (
              <Form>
                <FormGroup>
                  <Label>Email</Label>
                  <Input
                    type="email"
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    invalid={Boolean(errors.email && touched.email)}
                  />
                  <FormFeedback>
                    {errors.email}
                  </FormFeedback>
                </FormGroup>
                <FormGroup>
                  <legend className="col-form-label">犬を飼っていますか？</legend>
                  <FormGroup inline check>
                    <Label check>
                      飼っている：
                      <Input
                        type="radio"
                        name="pet"
                        value="havePet"
                        onChange={handleChange}
                      />
                    </Label>
                  </FormGroup>
                  <FormGroup inline check>
                    <Label check>
                      飼っていない：
                      <Input
                        type="radio"
                        name="pet"
                        value="noPet"
                        onChange={handleChange}
                      />
                    </Label>
                  </FormGroup>
                  <span className="text-danger small">{touched.pet && errors.pet ? errors.pet : null}</span>
                </FormGroup>
                <FormGroup>
                  <Label>ペットの名前</Label>
                  <Input
                    type="text"
                    name="petName"
                    value={values.petName}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    invalid={Boolean(errors.petName && touched.petName)}
                  />
                  <FormFeedback>
                    {errors.petName}
                  </FormFeedback>
                </FormGroup>
                <FormGroup></FormGroup>
                <Button onClick={handleSubmit}>申し込む</Button>
              </Form>
            )
          }
        </Formik>
      </div>
    );
  }
}

export default App;

편리하다