Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question