Блог

У меня есть форма, использующая Formik для моей формы с Yup для проверки. Под каждым Field у меня есть <ErrorMessage /> компонент для отображения соответствующего сообщения для этого поля формы. Это работает нормально, однако, поскольку полей много, я хотел бы отобразить общее сообщение рядом с кнопкой отправки, когда пользователь отправляет форму. Что-то вроде этого:

 <div className="alert alert-danger">
  One or more fields has an error.
</div>
 

Я попытался условно отобразить его на основе errors объекта из Formik:

 {Object.keys(errors).length > 0 amp;amp; (
  <div className="alert alert-danger">
    One or more fields has an error.
  </div>
)}
 

Однако, когда я onBlur использую любое из полей, все поля проверяются внутренне, независимо от того, были ли они затронуты или нет, поэтому, как только я заполняю первую форму, отображается это сообщение об ошибке. Как я могу отобразить это сообщение только в том случае, если поля были затронуты или рядом с ним отображается сообщение об ошибке?

Поскольку вы хотите отображать сообщение об ошибке только при отправке, Formik имеет isValid submitCount свойства и . Используйте их вместе, чтобы определить, следует ли отображать сообщение об ошибке:

 {!isValid amp;amp; submitCount > 0 amp;amp; (
  <div className="alert alert-danger">
    One or more fields has an error.
  </div>
)}
 

Это приведет к тому, что оно будет отображаться только после отправки формы, если есть какие-либо ошибки, и автоматически исчезнет после исправления всех ошибок.