У нас есть форма с полями, сгруппированными по экранам (разделам). Это разделение выполняется только визуально. Экраны названы и перечислены (всегда видимые) в левой части экрана. Отображаемое имя будет белым, если этот раздел отображается в данный момент. Если в каком-либо поле есть ошибка, отображаемое имя помечается красным, чтобы вы всегда знали, в каком разделе произошла ошибка. Такое поведение реализовано в каждом компоненте экрана (совсем не оптимально). ![mockup](https://i.stack.imgur.com/ai9je.png)
Проверка на стороне клиента работает хорошо (пока не всегда реализуется с помощью валидаторов). Но теперь я хочу реализовать то же поведение, если мы получим ошибку от API. Значение экранного имени - красное, если у поля есть ошибка отправки, и не красное, когда это поле было отредактировано.
В основном мне нужно сгруппировать поля ввода в Screen
компонент, который подписывается на каждое поле error
, submitError
и dirtySinceLastSubmit
. Затем мне нужно определить новую переменную состояния valid
в этом компоненте Screen
, которая проверяет все дочерние состояния и устанавливает соответствующее значение на основе каждого дочернего состояния.
Возможно ли группировать поля в реагировать -финал-форма и подписаться на изменения состояния ребенка?