gtosss / effector-react-form Goto Github PK

перед отправкой проверять валидацию полей это ок

но во время ввода текста в поле иногда требуется чтобы валидация вызывалась не по onChange, а по onBlur

фичреквест добавить настройки валидаций в контроллер

сейчас чтобы изменить значения группы полей формы надо прокинуть все поля в setFields, ручками изменив нужные.
не совсем удобно

• фичреквест setFieldStatePartial

сейчас useFieldArray возвращает только map, push, remove
иногда надо знать количество полей

  const { map, push, remove } = useFieldArray({ name, fieldArray, validate });

Добавить функцию validate в useFieldArray - можно использовать для групповой валидации, например

const { map, push, remove } = useFieldArray({
  name,
  fieldArray,
  validate: list => list.map(e => e.value).every(e => e.length === 0) ? "хотя бы одно поле должно быть заполнено" : undefined
});

outerValidate - аналогична функции validate, но ставит outerError - ошибки которые не блокируют отправку формы

можно добавить всякие популярные методы (а лучше эффекты) сомнительной полезности, например

• normalize - фильтрует ввод пользователя в поле ввода
• disabled - принимает ($values, $meta, ...) и можно поле сделать недоступным для редактирования (добавить к input)
• hidden - тоже самое, но поле можно скрыть вовсе
• onDisabledChange, onHiddenChange или ватчеры

const { input, error, isShowError, isHidden } = controller(...);
input.disabled // boolean

кейс
поле удалилось из формы (из UI по крайней мере), но имело валидацию (валидация ставилась в контроллере)
при отправке формы падает ошибка валидации

сейчас решается чем-то вроде сноса fieldState при анмаунте компонента

 useEffect(() => {
    return () => {
      form.setFieldState({
        field: name,
        state: {
          active: false,
          blurred: true,
          blurredAfterOuterError: false,
          changed: false,
          changedAfterOuterError: false,
          touched: false,
          touchedAfterOuterError: false,
          validate: undefined,
          _type: 'fieldMeta',
        }
      });
    }
  }, []);

как вариант, обернуть эту штуку в некий removeField

const { remove } = controller({ name });
useEffect(() => () => remove(), []);

или (из любого места)

form.removeField({ name });

ой, кажется эта ишью в репу с докой...)

скорее всего сейчас mapSubmit в коде используется как fn в sample перед вызовом эффекта onSubmit

но так как это простая функция, нельзя прицепить к ней сторонние сторы, например, через attach.
Единственный вариант - хранить все дополнительные данные в meta - неудобно для больших форм.

Если я перехожу с экрана с формой(при resetUnmount:false) куда-то по ссылке, а потом возвращаюсь назад, то значения полей остаются измененными, при этом значения из fieldState changed и touched сбрасываются

иногда важно иметь возможность удалить сразу всю группу полей

const { setValue } = controller(...);

upd. не совсем актуально, поскольку сейчас можно вызвать как-то так

const { input } = controller(...);
...
input.onChange(value);

кейс - нужно изменить значение поля так, чтобы вызвалась логика, реагирующая на изменения поля.
варианты с form.setValue + form.setFieldState не подходят, так как не вызывают этой реакции (и это хорошо)

приходится использовать target: form.onChangeFieldBrowser, но в аргументе там требуется React.SyntheticEvent, что не есть удобно, так как требует импорт реакта в файлик.

надо либо добавить какой-то евент типа form.changeField<T = any>({ field: string, value: T }) который будет прятать в себе вызов onChangeFieldBrowser, либо переделать типы onChangeFieldBrowser

const { map, push, remove } = useFieldArray({ name });
...
map(({ field, fieldItemId, index }) => {
  return <Field key={field.id} onRemove={() => remove(index)} />
});

иногда неудобно, хотелось бы иметь возможность более тонкого удаления

• как вариант что-то типа form.removeField({ name }) или form.removeFieldFromArray(...)

странный кейс

есть filedArray, такой что по-умолчанию есть одно поле
при этом весь этот блок может быть скрыт по какому-то условию

const { map, push, remove } = useFieldArray({ name: "nested" });
useEffect(() => {
  push({ id: uuid() })     // по-умолчанию создается одно поле
  return () => remove(0);  // в идеале бы здесь вызвать removeAll, но это уже другая issue
                           // если не вызывать удаление при сносе компонента, то
                           // при появлении его снова будет вызываться маунт-эффект
                           // и создаваться второе поле и так каждый раз
}, []);

фокус в том, что внутри этого fieldArray есть вложенные поля тоже fieldArray с абсолютно такой же логикой

если мы сносим рутовый fieldArray, то вызывается remove у вложенных, где-то там он у себя глючит и создает рутовый компонент обратно, только с id = undefined (ну и кидает в консоль ошибку что одинаковые react-key)

текущее решение

• не удалять блоки с fieldArray, а скрывать их, но тогда валидацию надо сносить
• отказаться от строки return () => remove(0) тогда удаление рута работает нормально, но появляется проблема из камментов

предложения:

• доработать remove на такой случай
• добавить в useFieldArray параметры mount / unmount, которые внутри себя будут корректно обрабатывать такие кейсы
• добавить возможность программного включения / отключения валидации у поля

const { input, isShowError, error } = controller({ name, initialValue });

сейчас аналогичное поведение можно сделать, закинув input.onChange('some value') в useEffect, но нельзя сказать, что это прям удобная штука