N
N
NewSantaClaus2022-04-13 17:46:41
React
NewSantaClaus, 2022-04-13 17:46:41

How to validate react-phone-input-2 with react-hook-form (yup)?

How to write a check so that the button becomes active only when the number is entered in full?

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

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question