/Javascript/React/Insert isValidPhoneNumber in react hook form

Insert isValidPhoneNumber in react hook form

import { useForm, Controller } from 'react-hook-form'
import PhoneInput, { isValidPhoneNumber } from 'react-phone-number-input'

import 'react-phone-number-input/style.css'

const MyForm = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="user-info-form">
      <div>
        <label htmlFor="phone-input">Phone Number</label>
        <Controller
          name="phone-input"
          control={control}
          rules={{ required: true }}
          render={({ field: { onChange, value } }) => (
            <PhoneInput
              value={value}
              onChange={onChange}
              defaultCountry="TH"
              id="phone-input"
            />
          )}
        />
        {errors.phone && <p className="error-message">Invalid Phone</p>}
      </div>
    </form>
  )
}

export default MyForm

Source: stackoverflow.com

Similar codes

0 vote296 views1 answer
React focus textarea
Javascript React
105 votes350 views1 answer
Install and run react js project...
Javascript React
32 votes311 views2 answers
How to routing in react js
Javascript React
0 vote302 views1 answer
Nested navigation react native
Javascript React
1 vote259 views1 answer
Table reactstrap
Javascript React
4 votes322 views3 answers
How to add google map in react js
Javascript React
0 vote290 views1 answer
Get nested value on object react using dot
Javascript React
133 votes440 views6 answers
Using bootstrap with react
Javascript React
0 vote349 views3 answers
Create react app theme_color
Javascript React
0 vote281 views2 answers
Error: Error: Unable to resolve module react-native-gesture-handler
Javascript React