Formik ：仅当字段可见时才需要验证

Question

我有一个包含复选框的表单，如果它是 true，则会出现一个新字段。

我希望当该字段可见时，它可以被认为是必需的，如果它不可见，则不需要。

只有当show 是true 时，这里的endComment 才应该是required

你有解决办法吗？

全局代码：

 const Form = {
   const [show, setShow] = useState<boolean>(props.event.endDate ? true : false);
   const addEndComment = (value: boolean) => {
     setShow(value);
   };

const schema = yup.object().shape({
    comment: yup.string().required(),
    endComment: yup.string().required(),
});

    return (
        <>
            <Formik
                enableReinitialize
                initialValues={{
                    comment: props.event.comment,
                    endComment: props.event.endComment,
                }}
                onSubmit={(values) => {
                  ....
                }}
                validationSchema={schema}
            >
                {(formikProps) => (
                    <form onSubmit={formikProps.handleSubmit}>
                        <section>
                            <p>
                                <I18nWrapper
                                    translateKey={'event.form-create-event.explanations'}
                                />
                            </p>
                        </section>
                        <section>
                            <Form.Group controlId="eventComment">
                                <Form.Label>
                                    <I18nWrapper
                                        translateKey={'event.form-create-event.comment-label'}
                                    />
                                </Form.Label>
                                <Form.Control
                                    value={formikProps.values.comment || ''}
                                    onChange={formikProps.handleChange}
                                    as="textarea"
                                    rows={3}
                                    name="comment"
                                    isInvalid={!!formikProps.errors.comment}
                                />
                                <Form.Control.Feedback
                                    type="invalid"
                                    role="alert"
                                    aria-label="no comment"
                                >
                                    <FontAwesomeIcon icon={faTimes} className="me-2" size="lg"/>
                                    <I18nWrapper
                                        translateKey={'reminder.modal.phone-reminder.error'}
                                    />
                                </Form.Control.Feedback>
                            </Form.Group>
                        </section>
                        <section>
                            <SimpleGrid columns={columns} rows={rows}/>
                        </section>
                        <section>
                            <Form.Group controlId="formBasicCheckbox">
                                <Form.Check
                                    type="checkbox"
                                    label={t('event.form-resolve-event.checkbox-label')}
                                    checked={show}
                                    onChange={(e) => addEndComment(e.target.checked)}
                                />
                            </Form.Group>
                        </section>
                        {show ? (
                            <React.Fragment>
                                <section>
                                    <I18nWrapper
                                        translateKey={'event.form-resolve-event.comment-end-label'}
                                    />
                                    <Form.Control
                                        value={formikProps.values.endComment || ''}
                                        onChange={formikProps.handleChange}
                                        as="textarea"
                                        rows={3}
                                        name="endComment"
                                        isInvalid={!!formikProps.errors.endComment}
                                    />
                                    <Form.Control.Feedback
                                        type="invalid"
                                        role="alert"
                                        aria-label="no comment"
                                    >
                                        <FontAwesomeIcon
                                            icon={faTimes}
                                            className="me-2"
                                            size="lg"
                                        />
                                        <I18nWrapper
                                            translateKey={'reminder.modal.phone-reminder.error'}
                                        />
                                    </Form.Control.Feedback>
                                </section>
                            </React.Fragment>
                        ) : null}

                        <div className="text-center">
                            <GenericButton
                                label={'button'}
                                type="submit"
                                disabled={!formikProps.isValid}
                            />
                        </div>
                    </form>
                )}
            </Formik>
        </>
    );
};



export default Form;

Answer 1

您可以根据show 状态简单地更改架构

例子：

const schema = yup.object().shape({
    comment: yup.string().required(),
    endComment: show ? yup.string().required() : yup.string(),
});

或

如果您将show 状态作为 formik 状态的一部分，您可以使用 formik 的条件验证，例如

const schema = yup.object().shape({
    comment: yup.string().required(),
    endComment: Yup.string().when('show', {
    is: true,
    then: Yup.string().required()
  }),
});

更多信息请参考yup docs