I have a React TypeScript project. There's a parent component that uses a form with the hook useForm (the first form), and a second form in a child component (each component is a separate form).
How can you make it, so that when you click the "Submit" button (a button with the type "submit") in the parent component, it also triggers validation of the required fields in the child component?
Additional information: the field validation rules, including their required status, are defined in a schema using Yup.
const FizContactUs: React.FC = () => {
const { getCaseCategories, categories } = useCaseStore()
const { control, handleSubmit, formState, trigger } = useForm<FizRegFormType>({
defaultValues: { isConfirmChecked: false },
resolver: yupResolver(SchemaFizContactUs(categories)),
mode: 'onChange'
})
useForm<FizRegFormType>({
defaultValues: { phone: '' },
resolver: yupResolver(SchemaFizReg),
mode: 'onChange'
})
const { currentUser } = useUserStore()
const { onCaseSubmit, getUserCases } = useCaseStore()
const { setIsUserLogin } = useProfileStore()
const [showCodeField, setShowCodeField] = useState(false)
useEffect(() => {
getCaseCategories()
}, [])
const handleSubmitCreateDoc = async (form: FizRegType) => {
const token = localStorage.getItem('token')
if (token) {
setIsUserLogin(true)
await onCaseSubmit({ ...form })
if (currentUser?.id) {
getUserCases(currentUser.id)
}
}
}
const handleChangeFormField =
<T,>(triggerName: keyof FizRegFormType, onChangeCallback: (event: T) => void) =>
(value: T) => {
trigger(triggerName)
onChangeCallback(value)
}
const handleSetShowCodeField = (value: boolean) => setShowCodeField(value)
return (
<>
<RegFormContactUs showCodeField={showCodeField} onSetShowCodeField={handleSetShowCodeField} />
<form className="container mt-8" onSubmit={handleSubmit(handleSubmitCreateDoc)}>
<Controller
control={control}
name="categoryId"
render={({ field: { onChange, ...field } }) => (
<ThemeSelect className="mt-8" {...field} onChange={handleChangeFormField('categoryId', onChange)} />
)}
/>
{formState.errors?.categoryId && <p className="mt-3 text-red-500">{formState.errors.categoryId.message}</p>}
<Controller
control={control}
name="description"
render={({ field: { value, onChange, ...field } }) => (
<TextArea
className="mt-8"
title="Опишите ситуацию и желаемый результат"
value={value}
onChange={handleChangeFormField('description', onChange)}
{...field}
/>
)}
/>
{formState.errors?.description && <p className="mt-3 text-red-500">{formState.errors.description.message}</p>}
<Controller control={control} name="documents" render={() => <AddDocs />} />
<Controller
control={control}
name="isConfirmChecked"
render={({ field: { onChange, ...field } }) => (
<UserAgreement
className="mt-20"
onChange={handleChangeFormField<boolean | React.ChangeEvent<Element>>('isConfirmChecked', onChange)}
{...field}
/>
)}
/>
{formState.errors?.isConfirmChecked && (
<p className="mt-3 text-red-500">{formState.errors.isConfirmChecked.message}</p>
)}
<Text
className="bg-myCol-beige w-78 mt-5 px-5 py-3"
text="Риск неблагоприятного исхода дела из-за неполного описания ситуации несет заявитель."
variant="Text3"
/>
<Button className="mt-10" text="Отправить" type="submit" variant="primary" />
</form>
</>
)
}
export default FizContactUs
I tried using the trigger function from the hook useForm within a function, but it didn't work because it required using this function within the child component.