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文档