反應電話號碼輸入驗證失敗

Question

如果發生任何輸入錯誤，我試圖避免提交反應表單。 但僅對於由react-phone-number-input package 處理的電話號碼輸入字段的驗證，我遇到了問題，因為它甚至允許提交無效輸入。 所以我在規則 object prop 中添加了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}`)}}
/>

模板字符串對我有用。