Реактивный телефонный вход 2 с формой ответа

Question

Я использую PhoneInput вместе с формой ответа, я хочу включить кнопку сохранения, только если номер телефона действителен

Код:

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