反应电话号码输入验证失败

Question

I am trying to avoid submitting react form if any input errors occurs. But only for the phone number input field's validations which is handled by react-phone-number-input package I am having issues because it allows to submit even for invalid inputs. So I added validate property in rules object prop. But it throws me parsePhoneNumber.js:18 Uncaught (in promise) TypeError: A text for parsing must be a string. My attempt is as below.

 <Controller
    name="phoneNum"
    render={({ field }) => (
      <SPhone
         label={Properties.TEL}
         {...field}
         error={errors.phoneNum && true}
         helperText={errors.phoneNum && errors.phoneNum.msg}/>
      )}
    control={control}
    defaultValue=""
    rules={{validate: (value) => isValidPhoneNumber(value)}}
 />

So what is the correct way to assign the rules prop to satisfy with the above phone number validation?

Answer 1

<Controller
name="phoneNum"
render={({ field }) => (
  <SPhone
     label={Properties.TEL}
     {...field}
     error={errors.phoneNum && true}
     helperText={errors.phoneNum && errors.phoneNum.msg}/>
  )}
control={control}
defaultValue=""
rules={{validate: (value) => isValidPhoneNumber(`${value}`)}}
/>

template string works for me.