Можно ли как-то проверить, все ли заполнены обязательные поля в react-hook-form?

Question

[lexstile]

Исользую библиотеку react-hook-form.
Есть задача - если все поля корректно заполнены, то я вывожу компонент с кнопкой.
Есть объект errors, который и хранит всю информацию об ошибках.

Но есть проблема - когда пользователь попадает на страницу первый раз, логично, что он поля еще не заполнил.
И в это время объекст errors пуст, так как пользователь еще не стриггерил onBlur, чтобы провалидировать форму.

Вопрос: можно ли как-то узнать, заполнены ли все обязательные поля в форме?

Если я вручную вызову triggerValidation в useEffect, например, но покажутся ошибки у полей, которые пользователь еще не заполнял.

Answer 1

[Demian Smith]

Вам может помочь объект formState:

const { isDirty, isValid } = formState;
return <>{isDirty && isValid && <button />}</>

Comments

[lexstile]

isDirty в 6 версии, у нас 5, это аналог dirty?
Если да, то это не совсем то, мне, допустим, нужно показывать другой блок, пока он не заполнит все обязательные поля.
1. Загружается страница
2. Заполнена половина полей формы
3. Мне никак не понять, что заполнена только половина до его взаимодействия с формой, а вместо кнопки показать тескт и только после того, как он заполнит все поля, я ему показываю кнопку.

[Demian Smith]

Вообще ориентироваться на dirty лучше не стоит потому что форма может стать предзаполняемой и dirty будет занозой в заднице. Я через час буду дома, посмотрю как это решал пару месяцев назад. Только у меня пятая версия, если что.

[lexstile]

Demian Smith, у нас тоже 5 версия, но сейчас посмотрел доку, isDirty только в 6. Но я мог и криво посмотреть.
Если вас не затруднит, посмотрите, пожалуйста, очень буду признателен.

[Demian Smith]

Смотрите, выход - это использование `watch`.

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

const formValues = watch();

И уже по formValues узнавать, заполнены ли необходимые поля:

{ formValues.userName && formValues.password && <SendSpamCheckbox /> }

Если нужно рендерить форму предзаполненной, то настоятельно рекомендую триггерить валидацию в ручную. Для этого есть метод triggerValidation:

useEffect(() => {
  triggerValidation(Object.keys(prefilledValues))
}, [prefilledValues])

В таком случае вы всегда можете знать какие поля заполнены и быть уверены что они провалидированы

{ formValues.userName && !errors.userName && formValues.password && !errors.password && <SendSpamCheckbox /> }

[Demian Smith]

Хозяйке на заметку: прятать кнопку сабмита и показывать её как только форма становится валидной - это антипаттерн. Как говорится "гугл так не делает".

[lexstile]

Demian Smith, ну это требования, пытались переспорить)

[lexstile]

Demian Smith, благодарю за ответ, а если полей несколько десятков (50-60)?

[Demian Smith]

Тогда, наверное, прийдётся создать некий массив, где перечислены все поля и проверять в цикле. Что-то вроде:

{ requiredFields.every(field => formValues[field] && !errors[field]) && <SendSpamCheckbox /> }

Прятать кнопку сабмита на формах, которые занимают больше экрана - это вообще преступление )) Бедный пользователь будет долго соображать какое именно поле он забыл заполнить (ошибка же не выводится). Сорри, если говорю тут очевидные вещи.

[lexstile]

Demian Smith, все нормально, благодарю за советы :)
Не совсем прятать, ситуация следующая: кнопка находится внизу формы, но если все поля заполнены и валидны, мы добавляем класс со свойством fixed, чтобы пользователю не скролить вниз, а мог сразу отправить.
Но логика проверки валидности и заполненности формы в любом случае одна и та же.

[Demian Smith]

Ааа, тогда ок :-)