Я создаю компонент в React для создания кулинарных рецептов. Я использую response-hook-form для проверки форм. У меня есть две формы на моем контейнере. Один для добавления ингредиентов с тремя полями ввода (имя, количество, единица измерения) и один для шагов - с одним полем ввода. Когда я добавляю ингредиенты или шаги, я проверяю правильность введенных данных и блокирую добавление элемента в список, который находится под этой формой, если данные неверны. Все идет нормально. Но моя проблема в том, что мне нужно получить доступ к процессу проверки этих двух форм с помощью моей общей кнопки «Добавить рецепт» внизу страницы. Например, если я оставлю те поля ввода, которые являются обязательными, пустыми, я хочу проверить это также нажатием кнопки «Добавить рецепт», а не только отправкой этих двух «подформ». Вот ссылка на суть: Ссылка . Может кто-нибудь, пожалуйста, посмотрите на мой код и дайте мне предложение.
PS .: Я создал компонент FormGroupArray для динамического добавления массива элементов FormGroup (я использую response- bootstrap).