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

Question

[San Manjiro]

У меня есть 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<...."

Разве я не могу просто указать что пропс строка и передать туда названия для контролера?

Comments

[historydev]

Покажи IDataForm

[San Manjiro]

historydev, export interface IDataForm {
firstName: string;
lastName: string;
middleName: string;
dateOfBirth: string;
phoneNumber: number | null;
email: string;
amount: number | null;
term: number | null;
checkbox: boolean;
}

[historydev]

San Manjiro, Найди в документации что требуется передать в name здесь:

<Controller
        control={props.control}
        name={props.name}

и здесь:

<FormInputText
              control={control}
              value={dataForm.lastName}
              name="lastName"

И ещё попробуй передать поле в пропсах типа IDataForm, если ошибка исчезнет - поищем как реализовать твой вариант:

export interface IFormInputText {
//...
data: IDataForm
}

[San Manjiro]

historydev, поля в пропсах я пробовал передать на прямую, т.е. в компоненте, где у меня name: string, я на прямую писал "lastName" и все работало отлично, а вот если тот же текст передавать и использовать, то возникает ошибка. По поводу документации, туда в name просто передает строка, так обязывается контроллер, который будет с текущим ярлыком мониторить состояние твоего контроллера.

[San Manjiro]

я нашел решение и твой прошлый ответ помог, в компоненте InputText, где я объявлял интерфейс, за место name: string, я передал name: keyof IDateForm и все заработало, завтра я это обкачу и если будет работать хорошо выложу ответ, но я до сих пор не уверен что это правильное решение .

[historydev]

San Manjiro, Правильное-правильное, молодец.