Да, проверка на основе нескольких отдельных условий - PullRequest
Новая
       13

Да, проверка на основе нескольких отдельных условий

0 голосов
/ 06 октября 2019

У меня есть следующая форма Formik с выпадающим списком и двумя указателями даты. Средства выбора даты имеют условную проверку: для них обоих, если пользователь выбирает первый элемент из раскрывающегося списка, мы создаем поля required.

Однако для второго DatePicker (EndDate) - я хочудополнительная проверка, ограничивающая дату не более 6 месяцев от начальной даты и никогда не меньше начальной даты. И это должно применяться только , если пользователь имеет First в качестве выбранного элемента. 

<Formik
    initialValues={{ Dropdown1: "", StartDate: "", EndDate: "" }}
    onSubmit={(values, actions) => {
        setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
        }, 1000);
    }}
    validationSchema={Yup.object().shape({
        StartDate: Yup.date.when("Dropdown1", (data, schema) => {
            data.Dropdown1 === "First" ? schema.required("this is a required field") : schema
        })

        EndDate: Yup.date.when("Dropdown1", (data, schema) => {
            data.Dropdown1 === "First" ? schema.required("this is a required field") : schema

            // Here I need another validation that checks EndDate can't be more than 6 months from StartDate and never less than StartDate
        })
    })}
    render={props => (
    <form onSubmit={props.handleSubmit}>
        <CustomDropdown
            dropdownItems=[
                { caption: "Select something", Id: "" },
                { caption: "First", Id: "1" },
                { caption: "Second", Id: "2" }
            ]
            onBlur={props.handleBlur}
            value={props.values.name}
            name="Dropdown1"
        />
        <CustomDatePicker
            name="StartDate"
        />
        <CustomDatePicker
            name="EndDate"
        />
        {props.errors.name && <div id="feedback">{props.errors.name}</div>}
        <button type="submit">Submit</button>
    </form>
    )}
/>

Как этого добиться?

...