My form includes multiple inputs, one of which is a file input. The number of file inputs can vary:
<EuiFilePicker
id={`templateFiles.${index}.documentTemplate`}
name={`templateFiles.${index}.documentTemplate`}
display="default"
accept=".ftl"
onChange={event => {setFieldValue(`templateFiles.${index}.documentTemplate`,event[0])}}
/>
I want to make the files required only if a previous input (contactType) has a specific value (LETTER). Here's what I have:
<EuiSelect
options={Object.values(ContactType)}
id={'contactType'}
name={'contactType'}
label={t('pages.participant.communicate.columns.contactType')}
/>
Where:
export enum ContactType {
LETTER = 'LETTER',
CALL = 'CALL',
}
And my validation schema looks like this:
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(),
})
However, this setup does not seem to work as expected. Even when contactType is selected as LETTER, the files are not required. I've tried using different syntax like :
is: 'LETTER',
then: ...
But the result remains unchanged.