0

Я использую react hook form для свой формы. В форме есть четыре поля textarea и один input type="file". Вот дефолтные значения моих полей при открытии окна формы:

{title: '', category: '', description: '', specification: '', uploadFile: Array(0)}

Я добился корректной работы всех textarea, а так же их валидации в зависимости от введенного текста, и т.д. Важно - все мои поля textarea и input являются обязательными. Серьезной проблемой для меня стала загрузка файлов. По логике программы пользователь может подгружать файлы в форму несколько раз ДО сабмита формы. Я сделал свой компонент таким:

import IconContainer from "../IconContainer/IconContainer";
import { UseFormWatch, UseFormSetValue, UseFormReset, Control, Controller, FieldErrorsImpl } from "react-hook-form";
import { UserSubmitForm } from "../../interfaces/inputs";

interface FileInputsProps {
  watch: UseFormWatch<UserSubmitForm>;
  setValue: UseFormSetValue<UserSubmitForm>
  reset: UseFormReset<UserSubmitForm>
  control: Control<UserSubmitForm>
  errors: Partial<FieldErrorsImpl<UserSubmitForm>>
}

const FileInputs = ({ errors, setValue, control, watch }: FileInputsProps) => {
  const allValue = watch();
  console.log(allValue);
  console.log(errors);

  const validateFile = (v:any[]): boolean => {
    return false;
  };

  return (
    <div className="modal__formItem">
      <label className="modal__input modal__input_files" htmlFor="formId">
        <IconContainer icon={"material-symbols:add"} sizeWidth={"15"} sizeHeight={"15"} />
        <Controller
          name="uploadFile"
          control={control}
          rules={{
            required: {value: true, message: "Обязательное поле"},
            validate: (v) => validateFile(v),
          }}
          render={({ field: { value, name } }) => {
            return (
              <input
                id="formId"
                name={name}
                type="file"
                multiple
                hidden
                onChange={e => {
                  if (e.target) {
                    if (e.target.files) {
                      setValue("uploadFile", [...value, e.target.files[0]]);
                    }
                  }
                }}
              />
            );
          }}
        />
        Добавить файл
      </label>
      <span className="modal__input-limit">pdf, excel, pptx</span>
    </div>
  );
};

export default FileInputs;

Первая проблема с которой я столкнулся - это некорректная валидация поля загрузки файла. Как видите я попытался принудительно запретить валидацию, попробовав возвращать false из validateFile. Даже при таком ручном запрете, если я ничего не ввожу в textarea и нажимаю submit я получаю корректную валидацию. В консоли при этом я вижу следующее:
Функция Watch() показывает мне корректный список полей, а значит и их регистрацию:

{title: '', category: '', description: '', specification: '', uploadFile: Array(0)}

Но вот попытка просмотреть errors выводит вот такие данные:

{title: {…}, category: {…}, description: {…}, specification: {…}}

Т.е. ошибки uploadFile просто нет при первом submit. Если же нажать submit второй раз, то в errors поле uploadFile появляется:

category
: 
{type: 'required', message: 'Обязательное поле', ref: {…}}
description
: 
{type: 'required', message: 'Обязательное поле', ref: {…}}
specification
: 
{type: 'required', message: 'Обязательное поле', ref: {…}}
title
: 
{type: 'required', message: 'Обязательное поле', ref: {…}}
uploadFile
: 
{type: 'required', message: 'Обязательное поле', ref: {…}}  

Вот ссылка на песочницу. https://codesandbox.io/s/jolly-glade-hhhbdo Как мне корректно валидировать данную форму, чтобы сабмит не срабатывал при первом нажатии

2
  • не полностю разобрал, попробуй по точнее описать, либо кодом.
    – Armen
    26 ноя 2022 в 0:14
  • Ну если совсем просто - есть у вас кликер, т.е. <input type="file"/>. Кликаете вы по нему один раз, находите файл, нажимаете в диалоговом окне "Выбрать". Файл сохраняется на front`e (Где?). Гажимаете еще раз. Снова открывается диалоговое окно. Снова выбираете файл, уже второй. Он так же сохраняется как и первый на фронте. В данной форме помимо <input type="file"/> есть и <textarea />. Смысл в том, что бы сохранить как-то и где-то выбранные файлы, а потом, когда мы сабмитим форму, наши файлы отправились бы на сервер неким массивом(?).
    – elarri
    28 ноя 2022 в 20:37

1 ответ 1

1

полноценный рабочий пример, типизацию только убрал.

export const App = () => {
  const { control, handleSubmit, formState, watch } = useForm();

  const handleFormSubmit = handleSubmit((data) => {
    console.log({ data });
  });

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          handleFormSubmit(e);
        }}
        style={{
          display: "flex",
          flexDirection: "column",
          gap: 20,
          maxWidth: 400,
          width: "100%",
        }}
      >
        <FileFormInput control={control} name="file" />
        <TextFormInput control={control} name="name" />
        <TextFormInput control={control} name="surname" />
        <button>submit</button>
      </form>
    </div>
  );
};

const FileFormInput: FC = ({ control, name: propsName }) => {
  const {
    field: { onChange, value, name },
    fieldState: { error },
  } = useController({
    control,
    name: propsName,
    defaultValue: [],
    rules: {
      required: {
        message: "required",
        value: true,
      },
    },
  });

  return (
    <div>
      <label
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: 200,
          height: 50,
          border: "1px solid black",
          position: "relative",
        }}
      >
        заполни меня
        <input
          type={"file"}
          multiple
          style={{
            opacity: "0",
            width: "100%",
            height: "100%",
            position: "absolute",
            left: 0,
            top: 0,
          }}
          name={name}
          onChange={(e) => {
            if (e.target?.files?.[0]) {
              if (value?.length) {
                return onChange([...value, ...Array.from(e.target.files)]);
              }
              return onChange([e.target.files[0]]);
            }
          }}
        />
      </label>
      {error?.message && (
        <span
          style={{
            color: "red",
          }}
        >
          {error.message}
        </span>
      )}
      {value?.map(({ name }) => name).join(", ")}
    </div>
  );
};

const TextFormInput = ({ control, name: propsName }) => {
  const {
    field,
    fieldState: { error },
  } = useController({
    control,
    name: propsName,
    defaultValue: "",
    rules: {
      required: {
        message: "required",
        value: true,
      },
    },
  });
  return (
    <label>
      <input type="text" {...field} />
      {error?.message && (
        <span
          style={{
            color: "red",
          }}
        >
          {error.message}
        </span>
      )}
    </label>
  );
};

10
  • Добавил конкретики в вопросе + codesanbox
    – elarri
    1 дек 2022 в 22:01
  • @elarri, на верху полноценно рабочий пример, если интересует почему конкретно в той реализации которая у тебя есть что то не работает минимизируй максимально пример, лень же смотреть все файлы что куда где), хотя Controller конкретно я не юзаю, может что то спецефичное.
    – Armen
    2 дек 2022 в 22:03
  • Если честно, я в ступоре. Вчера сделал все по твоему примеру и о чудо - все сработало. Сегодня просто перезапускаю проект без каких либо изменений (!!!) npm start и загрузка опять не работает. Какой-то бред...
    – elarri
    8 дек 2022 в 8:56
  • @elarri да что то странное, скинь какие ошибки, может что то проеснится.
    – Armen
    8 дек 2022 в 11:41
  • @elarri кстати это чисто рукаписный пример, но есть либы в npm dropzone и тд, которые те уже дают инкапсулировано это все, просто надо связать с use-form
    – Armen
    8 дек 2022 в 11:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.