小编ASI*_*AIF的帖子

如何添加验证，我想在电话号码字段（helperText，最小 10 ，最大 10 ）上显示错误消息，并且如果提交时没有 10 个数字，还显示错误消息

import ReactPhoneInput from "react-phone-input-2"
import {TextField,Button}from "@material-ui/core"

const {register, handleSubmit,formState: { errors }} = useForm()

const getData= (data) => {
   console.log(data.username)
   console.log(data.phone);
}

<form onSubmit={handleSubmit(getData)} >

  <Controller
        control={control}
        name="phone"
        render={({ field: { ref, ...field } }) => (
          <ReactPhoneInput {...field}
            inputExtraProps={{ref, required: true, autoFocus: true }}
            country={"in"}
            onlyCountries={["in"]}
            countryCodeEditable={false}
            specialLabel={"Player Mobile Number"}
          />
        )}
      />
<Button type='submit>Submit</Button> 
</form>

我在提交时获取 TextField 值，但不是 ReactPhoneInput 值，如何使用react-hook-form获取该值

import ReactPhoneInput from "react-phone-input-2"
import {TextField,Button}from "@material-ui/core"

const {register, handleSubmit,formState: { errors }} = useForm()

const getData= (data) => {
   console.log(data.username)
   console.log(data.username);
}

形式

<form onSubmit={handleSubmit(getData)} >

  <TextField {...register("username")} />

   <ReactPhoneInput
      inputExtraProps={{
        name: "phone",
        required: true,
        autoFocus: true
      }}

      country={"in"}
       onlyCountries={["in"]}                     
       countryCodeEditable={false}
        specialLabel={"Player Mobile Number"}
       rules={{ required: true }}
     />
<Button type='submit>Submit</Button> 
</form>