Zod: Валидация select?

Question

[setupx]

В общем появилась "проблема" в валидации кастомного компонента select.

Дело в том, что input получается валидировать вот так и все прекрасно работает:

code

<FormInput
                        label="Напишите"
                        helper={errors.test?.message}
                        status={errors.test ? "error" : "default"}
                    >
                        <Input
                            {...register("test")}
                        />
                    </FormInput>

то есть я зарегистрировал строку к данному input и все валидируется, без создания дополнительных переменных, в которых я бы хранил значение и далее работал с ним.

code

const onSubmitData = (data: FormData) => {
        console.log("data", data);
    };

и данные легко получаются и все прекрасно. Но именно с кастомным селектом так не получается:

code

<Select
                        options={options}
                        placeholder="1"
                        {...register("category")}
                    />

он у меня реализован чисто на div и не работает. На стандартных работает. Я пробовал создавать select невидимым и присваивать ему значение, но так тоже не работает

Вопрос: Можно ли как-то реализовать валидацию без onChange?

Comments

[szQocks]

Вопрос: Можно ли как-то реализовать валидацию без onChange?

кастомный кастомныый селкт на дивах и не требует onChange, там же можно всё сделать на клик, как у тебя он на onchange был ?

[setupx]

szQocks, ошибся, просто голова уже варенная. Там при клике на выбор устанавливался текущий выбор в useState

[setupx]

szQocks, пока решил с помощью watch из useForm

const {
        register,
        handleSubmit,
        watch,
        control,
        formState: { errors },
        reset,
        trigger,
    } = useForm<FormData>({
        resolver: zodResolver(schema),
        defaultValues: {
            category: defaultCategory,
            title: ""
        }
    });

[Aetae]

Про конкретную либу ничего не знаю, но в первую очередь тебе надо понять, что ...register("category") это не магическое заклинание. Это вызов функции register с параметром "category", получение в ответ объекта, и передача этого объекта в props компонента. Объект там скорее всего примерного вида:

{
  value: <значение из внутреннего state для "category">,
  onChange: (event) => <значение из внутреннего state для "category"> = event.target.value
}

Соответственно в лоб ты можешь сделать так:

const { onChange: categoryRegisteredChange, ...categoryRegistered } = register("category");

<Select
  options={options}
  placeholder="1"
  onClick={categoryRegisteredChange} // или на что там у тебя завязано изменение
  {...categoryRegistered}
/>

Но лучше тебе почитать документацию библиотеки, там гарантировано расписано как правильно работать с кастомными компонентами и событиями.

[szQocks]

setupx, Ты скидываешь куски кода, но не целые, решил через watch но показываешь всего лишь importэ того watch из react-hooks-form, то есть ты решил через watch не используя его ? пиши нормально

вообще по нормальному надо было, добавить код кастомного селекта, и свои попытки валидации, там провалидировать особо сложного ничего нет, но что у тебя там ( я не знаю ) поэтому ответ немогу дать