/Javascript/React/React-phone-number-input retur message in react hook form

React-phone-number-input retur message in react hook form

import React from "react";
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={{
            validate: (value) => isValidPhoneNumber(value)
          }}
          render={({ field: { onChange, value } }) => (
            <PhoneInput
              value={value}
              onChange={onChange}
              defaultCountry="TH"
              id="phone-input"
            />
          )}
        />
        {errors["phone-input"] && (
          <p className="error-message">Invalid Phone</p>
        )}
      </div>
    </form>
  );
};

export default MyForm;

Source: stackoverflow.com

Similar codes

0 vote241 views1 answer
Change candle color react highcharts
Javascript React
0 vote255 views1 answer
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
Javascript React
1 vote200 views1 answer
Ctx in react
Javascript React
2 votes299 views4 answers
Discord js remove reaction from user
Javascript React
11 votes239 views2 answers
React must be in scope when using jsx
Javascript React
0 vote247 views1 answer
React native carriage return
Javascript React
17 votes222 views6 answers
React native build android
Javascript React
97 votes231 views8 answers
Create react app
Javascript React
32 votes218 views6 answers
Usestate react
Javascript React
2 votes267 views2 answers
React material ui media queries
Javascript React