I have the following schema
:
<code>const lectureOption = z
.object({
duration: z.number(),
price: z.string(),
enabled: z.boolean(),
})
.refine(
(value) => {
if (value.enabled) {
return price.safeParse(value.price).success;
}
return true;
},
{ message: 'Cena nie może być niższa niż 2 PLN.' }
);
export const arrayOfLectureOptions = z.array(lectureOption);
</code>
<code>const lectureOption = z
.object({
duration: z.number(),
price: z.string(),
enabled: z.boolean(),
})
.refine(
(value) => {
if (value.enabled) {
return price.safeParse(value.price).success;
}
return true;
},
{ message: 'Cena nie może być niższa niż 2 PLN.' }
);
export const arrayOfLectureOptions = z.array(lectureOption);
</code>
const lectureOption = z
.object({
duration: z.number(),
price: z.string(),
enabled: z.boolean(),
})
.refine(
(value) => {
if (value.enabled) {
return price.safeParse(value.price).success;
}
return true;
},
{ message: 'Cena nie może być niższa niż 2 PLN.' }
);
export const arrayOfLectureOptions = z.array(lectureOption);
And I use it like this:
<code>interface Props {
form: UseFormReturn<SaveLectureSchemaType>;
}
export const OptionsStep = ({ form }: Props) => {
const {
register,
formState: { errors, isValid },
control,
watch,
} = form;
const { fields: optionFields } = useFieldArray({
control,
name: 'options',
});
console.log('Errors', errors, isValid, 'Array', optionFields);
watch();
return (
<FormWrapper
title='Cena'
description='Ustal cenę za poszczególną długość zajęć.'
>
<div className='grid grid-cols-3 gap-4'>
{optionFields.map((field, i) => (
<div key={field.id} className='flex flex-col gap-2'>
<div className='flex items-center justify-between'>
<Label
htmlFor={`options.${i}.price`}
>{`Cena za ${field.duration} minut`}</Label>
<FormSwitch
control={control}
errors={errors}
name={`options.${i}.enabled`}
/>
</div>
<FormCurrencyInput
key={i}
name={`options.${i}.price`}
errors={errors}
control={control}
disabled={!watch(`options.${i}.enabled`)}
/>
</div>
))}
</div>
</FormWrapper>
);
};
</code>
<code>interface Props {
form: UseFormReturn<SaveLectureSchemaType>;
}
export const OptionsStep = ({ form }: Props) => {
const {
register,
formState: { errors, isValid },
control,
watch,
} = form;
const { fields: optionFields } = useFieldArray({
control,
name: 'options',
});
console.log('Errors', errors, isValid, 'Array', optionFields);
watch();
return (
<FormWrapper
title='Cena'
description='Ustal cenę za poszczególną długość zajęć.'
>
<div className='grid grid-cols-3 gap-4'>
{optionFields.map((field, i) => (
<div key={field.id} className='flex flex-col gap-2'>
<div className='flex items-center justify-between'>
<Label
htmlFor={`options.${i}.price`}
>{`Cena za ${field.duration} minut`}</Label>
<FormSwitch
control={control}
errors={errors}
name={`options.${i}.enabled`}
/>
</div>
<FormCurrencyInput
key={i}
name={`options.${i}.price`}
errors={errors}
control={control}
disabled={!watch(`options.${i}.enabled`)}
/>
</div>
))}
</div>
</FormWrapper>
);
};
</code>
interface Props {
form: UseFormReturn<SaveLectureSchemaType>;
}
export const OptionsStep = ({ form }: Props) => {
const {
register,
formState: { errors, isValid },
control,
watch,
} = form;
const { fields: optionFields } = useFieldArray({
control,
name: 'options',
});
console.log('Errors', errors, isValid, 'Array', optionFields);
watch();
return (
<FormWrapper
title='Cena'
description='Ustal cenę za poszczególną długość zajęć.'
>
<div className='grid grid-cols-3 gap-4'>
{optionFields.map((field, i) => (
<div key={field.id} className='flex flex-col gap-2'>
<div className='flex items-center justify-between'>
<Label
htmlFor={`options.${i}.price`}
>{`Cena za ${field.duration} minut`}</Label>
<FormSwitch
control={control}
errors={errors}
name={`options.${i}.enabled`}
/>
</div>
<FormCurrencyInput
key={i}
name={`options.${i}.price`}
errors={errors}
control={control}
disabled={!watch(`options.${i}.enabled`)}
/>
</div>
))}
</div>
</FormWrapper>
);
};
Unfortunately, it does not work in the sense that errors
array does not contains errors for options
even though the price
attribute in one of the item is invalid and hence should raise error. What am I doing wrong? I need to raise an error if some item is enabled
and the price
is invalid. What can I do? Is my schema fine?