响应-电话号码输入验证失败

Question

如果出现任何输入错误，我将尽量避免提交react表单。但是，仅对于电话号码输入字段的验证(这是由react-phone-number-input包处理的)，我有问题，因为它允许提交，即使是无效的输入。因此，我在rules对象支柱中添加了validate属性。但是它抛给我parsePhoneNumber.js:18 Uncaught (in promise) TypeError: A text for parsing must be a string.，我的尝试如下所示。

 <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)}}
 />

那么，有什么正确的方法来分配规则支柱以满足上述电话号码验证呢？

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}`)}}
/>

模板字符串对我有用。