Я настроил так useForm:
const {
register,
watch,
handleSubmit,
setValue,
setError,
formState: { errors }
} = useForm<UserSubmitForm>({
defaultValues: {
firstName: "",
secondName: ""
},
mode: "onChange"
});
Так у меня отрисовываются input`ы:
return (
<form className="modal__form" onSubmit={handleSubmit(onSubmit)}>
<div className="modal__body">
<div className="modal__info">
<TextAreaWithLimit
register={register}
watch={watch}
errors={errors}
setValue={setValue}
setError={setError}
name={"firstName"}
placeholder={"Заголовок"}
limit={50}
/>
<TextAreaWithLimit
register={register}
watch={watch}
errors={errors}
setValue={setValue}
setError={setError}
name={"secondName"}
placeholder={"Второй заголовок"}
limit={9}
/>
</div>
<input type="submit" />
<div className="modal__img">
<img src={cardImg} alt="" />
</div>
</div>
</form>
);
В компонент с инпутом, как видно передается значение лимита. В самом компоненте мне надо добиться следующих проверок. Require - это я сделал.
const TextAreaWithLimit = ({ register, watch, errors, name, placeholder, limit }: TextAreaWithLimitProps) => {
const valueField = watch(name);
return (
<div className="modal__formItem">
<textarea
{...register(name, {
required: { value: true, message: "Обязательное поле" },
})}
readOnly={valueField.length==limit}
rows={1}
className="modal__textArea"
placeholder={placeholder}
/>
<span className="modal__textArea-limit">{errors[name] ? errors[name]?.message : (limit - valueField.length)}</span>
</div>
);
};
Далее, мне необходимо валидировать форму по максимальному кол-ву символов. При этом мне надо останавливать ввод, если valueField === limit
и возобновлять его, когда это условие не выполняется. Я пробовал использовать и onChange
и disable
. Но не могу добиться корректного выполнения скрипта. Помогите, я новичок в react hook form