Как сделать чтобы react input mask работал с react hook forms?

Question

[tostershmoster]

Закомментированный код делает маску для номера телефона, но при этом перестаёт сохраняться новый номер. Видимо ref как-то влияет на логику react hook form. Как это исправить?

const Profile = () => {

  const { userInfo } = useGetCurrentUserInfo();
  const { register, handleSubmit } = useForm<IFormInputs>();
  // const inputRef = useMask({
  //   mask: '+7 (___) ___-__-__',
  //   replacement: { _: /\d/ },
  // });

  // ...

  return (

            <form
              onSubmit={handleSubmit(onSubmitName)}
              action=""
            >
            // ...
                  <div>
                    <label
                      htmlFor="phone"
                    >
                      Телефон
                    </label>
                    <input
                      {...register('phone')}
                      defaultValue={userInfo?.phone}
                      autoComplete="off"
                      name="phone"
                      // ref={inputRef}
                      type="text"
                      id="phone"
                      aria-invalid={false}
                    />
                  </div>


              <Button variant="destructive">
                Сохранить
              </Button>
            </form>
      // ...
  );
};

export default Profile;

Answer 1

[Tony]

У RHF есть control его используйте

import { useForm, Controller } from "react-hook-form";
import { IMaskInput } from "react-imask";

type FormValues = {
  phone: string;
};

export default function InputPhone() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: { phone: "" },
  });

  const onSubmit = (data: FormValues) => {
    const clean = data.phone.replace(/\D/g, "");
    console.log(clean);
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="phone"
        control={control}
        rules={{
          required: "Введите номер",
          validate: (v) =>
            v.replace(/\D/g, "").length === 11 || "Номер неполный",
        }}
        render={({ field }) => (
          <IMaskInput
            {...field}
            mask="+{7} [phone]"
            unmask={false}
            inputMode="tel"
            className="border-2"
            onAccept={(value) => field.onChange(value)}
            placeholder="+7 (___) ___-__-__"
          />
        )}
      />

      {errors.phone?.message && (
        <p className="text-sm text-red-700">{errors.phone.message}</p>
      )}

      <button type="submit">Отправить</button>
    </form>
  );
}