带有反应挂钩形式的电话输入2

Question

我正在使用PhoneInput以及React Hook表单，我只想在电话号码有效的情况下启用保存按钮

代码：

    <form onSubmit={handleSubmit(onSubmitRequest)}>
      .....................other code..............
       <Controller
        as={
          <PhoneInput
            id="pNum"
            placeholder="Enter phone number"
            className={classes.phoneInput}
            inputRef={register({required: true})}
            isValid={(inputNumber, onlyCountries) => {
              return onlyCountries.some((country) => {
                return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
              });
            }}
          />
        }
        name="phoneNumber"
        control={control}
      />
     ........................other code...................
     <Button
        fullWidth
        type="submit"
        variant="contained"
        color={'primary'}
        className={classes.submitBtn}
        data-testid="customerFormButton"
        disabled={!formState.isValid}
      >
        Save
      </Button>
  </form>

这里我使用PhoneInput作为控制器以及isValid。如何禁用“保存”按钮以输入无效的电话号码？

Answer 1

你好吗？我相信您的问题是因为您没有为控制器配置规则。

您需要将控制器更改为如下所示：

<Controller
        as={
          <PhoneInput
            id="pNum"
            placeholder="Enter phone number"
            className={classes.phoneInput}
            inputRef={register}
            isValid={(inputNumber, onlyCountries) => {
              return onlyCountries.some((country) => {
                return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
              });
            }}
          />
        }
        name="phoneNumber"
        control={control}
        rules= {{required: true}}
      />