Нужно как-то отследить чтобы если например select или input изменился getvalues как-то перендеривался и срабатывал useffect
'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import {
Button,
FormControl,
FormControlLabel,
FormLabel,
InputLabel,
Radio,
RadioGroup
} from '@mui/material'
import { useEffect, useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import BirthDateInput from '@/shared/components/ui/BirthDateInput'
import EmailInput from '@/shared/components/ui/EmailInput'
import PasswordInput from '@/shared/components/ui/PasswordInput'
import StrokeInput from '@/shared/components/ui/StrokeInput'
import TelInput from '@/shared/components/ui/TelInput'
import { EMAILDOMAINS } from '@/shared/constants/forms.constants'
import { registerSchema } from '@/shared/schemas/register.schema'
import { IRegisterForm } from '@/shared/types/auth.types'
const RegisterPage = () => {
const {
register,
handleSubmit,
reset,
setValue,
control,
setError,
getValues,
formState: { errors }
} = useForm<IRegisterForm>({
resolver: zodResolver(registerSchema)
})
useEffect(() => {
console.log('changed value ', getValues('birthdate'))
}, [
getValues,
getValues('birthdate'),
getValues('birthdate')?.year,
getValues('birthdate')?.month,
getValues('birthdate')?.day
]) // не отслеивается изменение
const [emailValue, setEmailValue] = useState('')
const onSubmit: SubmitHandler<IRegisterForm> = (data, e) => {
e?.preventDefault()
console.log('submit ', data)
}
return (
<div className='max-w-[600px] mx-auto shadow-normal p-5 mt-10 mb-10'>
<form onSubmit={handleSubmit(onSubmit)}>
<h2 className='text-center text-2xl font-bold mb-10'>
Создание почтового ящика
</h2>
<div className='flex flex-col gap-4'>
<div className='flex gap-4'>
<StrokeInput
label='Имя'
error={!!errors.name}
helperText={errors.name?.message}
{...register('name')}
/>
<StrokeInput
label='Фамилия'
error={!!errors.lastName}
helperText={errors.lastName?.message}
{...register('lastName')}
/>
</div>
<div>
<InputLabel>Дата рождения</InputLabel>
<BirthDateInput
errors={{
day: errors.birthdate?.day,
month: errors.birthdate?.month,
year: errors.birthdate?.year
}}
register={register}
control={control}
/>
</div>
<FormControl>
<FormLabel id='demo-row-radio-buttons-group-label'>Пол</FormLabel>
<RadioGroup
row
aria-labelledby='demo-row-radio-buttons-group-label'
name='row-radio-buttons-group'
>
<FormControlLabel
value='female'
control={<Radio />}
label='Мужской'
/>
<FormControlLabel
value='male'
control={<Radio />}
label='Женский'
/>
</RadioGroup>
</FormControl>
<div>
<InputLabel>Имя ящика</InputLabel>
<EmailInput
inputType='register'
domains={EMAILDOMAINS.domains}
defaultDomainValue={EMAILDOMAINS.defaultValue}
value={emailValue}
setValue={setEmailValue}
/>
</div>
<div>
<InputLabel>Номер телефона</InputLabel>
<TelInput />
</div>
<div>
<InputLabel>Пароль</InputLabel>
<PasswordInput />
</div>
<Button
type='submit'
variant='contained'
sx={{ mt: 3 }}
>
Создать
</Button>
</div>
</form>
</div>
)
}
export default RegisterPage