sanManjiro
@sanManjiro

React-hook-form как передать name в компонет?

У меня есть useForm:
const {
    control,
    setValue,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IDataForm>({ mode: "all" });

, и есть отдельные компонент:
import {
  useForm,
  Controller,
  Control,
  FieldValues,
  FieldErrors,
} from "react-hook-form";

import { getErrorMessage } from "@utilities/getErrorMessage";

import style from "./input-error-message.module.scss";
import { IDataForm } from "@/interfaces/Interfaces";

export interface IFormInputText {
  control: Control<IDataForm>;
  value: string;
  name: string;
  placeholder: string;
  minLength: number;
  maxLength: number;
  pattern: RegExp;
  patternValid: RegExp;
  onChange: (event: string) => void;
  error: FieldErrors;
}

export default function InputText(props: IFormInputText): JSX.Element {
  const {} = useForm({ mode: "all", shouldUnregister: true });
  const errorMessage = getErrorMessage(props.error, props.name);
  console.log(props.name);

  return (
    <div className={style.formInput}>
      <Controller
        control={props.control}
        name={props.name}
        defaultValue={props.value || ""}
        rules={{
          required: "*Необходимо заполнить поле",
          minLength: {
            value: props.minLength,
            message: "*Минимум 2 символа",
          },
          maxLength: {
            value: props.maxLength,
            message: "*Не больше 30 символов",
          },
          pattern: {
            value: props.patternValid,
            message: "*Допустим ввод только русских символов",
          },
        }}
        render={({ field: { onChange, onBlur } }) => (
          <input
            value={props.value}
            className="custom-input"
            placeholder={props.placeholder}
            onChange={(value) => {
              onChange(value);
              props.onChange(value.target.value);
            }}
            onBlur={onBlur}
          />
        )}
      />
      <p className={`${style.errorMessage} form-error-message`}>
        {errorMessage && <span>{errorMessage}</span>}
      </p>
    </div>
  );
}

, который я использую вот так:
<FormInputText
              control={control}
              value={dataForm.lastName}
              name="lastName"
              placeholder="Фамилия"
              minLength={2}
              maxLength={30}
              pattern={RegForInitials}
              patternValid={/^[^A-Za-z]+$/gi}
              onChange={(event) =>
                updateDataForm({
                  lastName: RepWordUp(event.replace(RegForInitials, "")),
                })
              }
              error={errors}
            />

Я получаю ошибку в name={props.name} указывающую на name:
Тип "string" не может быть назначен для типа ""firstName" | "lastName" | "middleName" | "dateOfBirth" | "phoneNumber" | "email" | "amount" | "term" | "checkbox"".ts(2322)
controller.d.ts(20, 5): Ожидаемый тип поступает из свойства "name", объявленного здесь в типе "IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElement<...."

Разве я не могу просто указать что пропс строка и передать туда названия для контролера?
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы