@NewSantaClaus

Как валидировать react-phone-input-2 с помощью react-hook-form (yup)?

Как написать проверку так, чтобы кнопка ставала активной только тогда, когда номер введен полностью?

import { useForm, Controller } from "react-hook-form"
import PhoneInput from "react-phone-input-2"
import "react-phone-input-2/lib/style.css"
import { yupResolver } from "@hookform/resolvers/yup"

const schema = yup.object().shape({
  phone: yup.mixed().test("phone", "Error", value => {
    console.log(value)
  }),
})

const PhoneForm = () => {
  
  const {
    register,
    formState: { errors, isValid },
    handleSubmit,
    control
  } = useForm({
    mode: "all",
    resolver: yupResolver(schema)
  })

  const onSubmit = data => {

  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="phone"
        defaultValue=""
        render={({ field }) => (
          <PhoneInput className="input-control" country={'us'} {...field} />)
        }
      />
      <Button
        disabled={!isValid}
      >Go</Button>
    </form>
  )
}

export default PhoneForm
  • Вопрос задан
  • 715 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 18:46
3000 руб./за проект
28 нояб. 2024, в 17:46
10000 руб./за проект
28 нояб. 2024, в 17:38
12000 руб./за проект