Formik条件验证不起作用

Question

我有一个输入很少的表单。其中之一是文件输入，文件输入的数量是动态的：

<EuiFilePicker
id={`templateFiles.${index}.documentTemplate`}
name={`templateFiles.${index}.documentTemplate`}
display="default"                                
accept=".ftl"
onChange={event => {setFieldValue(`templateFiles.${index}.documentTemplate`,event[0])}}
/>

我试图使文件是必需的，只有当一个以前的输入(contactType(是特定的值(LETTER(。我有这样的东西：

<EuiSelect
options={Object.values(ContactType)}
id={'contactType'}
name={'contactType'}
label={t('pages.participant.communicate.columns.contactType')}
/>

其中：

export enum ContactType {
LETTER = 'LETTER',
CALL = 'CALL',
}

和验证模式：

export const projectContactSchema: SchemaOf<ProjectContactDto> = Yup.object().shape({
{other values...}
contactType: Yup.mixed()
.oneOf(Object.values(ContactType))
.required(i18next.t('pages.participant.communicate.inputs.contactTypeRequired')),
templateFiles: Yup.array()
.of(
Yup.object().shape({
language: Yup.mixed()
.oneOf(Object.values(eLanguage))
.required(i18next.t('pages.participant.communicate.inputs.languageRequired')),
documentTemplate: Yup.mixed().when('contactType', {
is: contactType => contactType === 'LETTER',
then: Yup.mixed().required(i18next.t('pages.participant.communicate.inputs.templateFileRequired')),
otherwise: Yup.mixed().notRequired(),
}),
})
)
.unique('Languages should be unique', (val: any) => val.language)
.notRequired()
.nullable(),
})

但这根本不起作用。即使选择contactType作为LETTER，也不需要文件。我在尝试其他语法，比如：

is: 'LETTER',
then: ... 

但结果是一样的。

Answer 1

我刚刚找到了一个解决方案，我将"when"语句提高了两步。似乎yup无法检查条件是否嵌套。

templateFiles: Yup.array()
.when('contactType', {
is: contactType => contactType === 'LETTER',
then: Yup.array().of(
Yup.object().shape({
language: Yup.mixed()
.oneOf(Object.values(eLanguage))
.required(i18next.t('pages.participant.communicate.inputs.languageRequired')),
documentTemplate: Yup.mixed().required('test'),
})
),
otherwise: Yup.array().of(
Yup.object().shape({
language: Yup.mixed()
.oneOf(Object.values(eLanguage))
.required(i18next.t('pages.participant.communicate.inputs.languageRequired')),
documentTemplate: Yup.mixed().notRequired(),
})
),
})