Как выполнить проверку формы на нескольких вкладках, которые проверяются с помощью FormGroup

Question

Я разрабатываю приложение Workflow для Angular2, которое собирает данные на нескольких вкладках, настраивая поля на каждой вкладке на основе значений предыдущих вкладок, а затем проверяя, что все вкладки правильно заполнены по пути. Я использую маршрутизатор Angular2, чтобы контролировать, какой компонент вкладки отображается, и каждая вкладка использует FormGroup для обработки проверки формы. (См. Ниже, чтобы получить визуальное представление о иерархии компонентов и о том, как работает приложение.) Мне нужен элегантный способ вычисления достоверности данных во всех вкладках рабочего процесса, без необходимости открывать каждую вкладку для активации своего контроллера и валидаторов FormGroup. В идеале валидация рабочего процесса для вкладки будет использовать ту же логику, что и валидация табуляции FormGroup, чтобы держать вещи сухими и последовательными.

По мере того как пользователи касаются полей, я регистрирую «грязное» состояние вкладки в БД, поэтому у меня нет проблем, зная, когда вкладка нетронутая/грязная. Проблема в том, что когда пользователь возвращается к ранее сохраненному рабочему процессу, как мне вычислить действительное/недопустимое состояние для всех данных вкладки, когда пользователь еще не коснулся FormGroup s на этих вкладках?

Спасибо за любые предложения по шаблонам проектирования, которые могут это сделать!

Несколько деталей дизайна:

• Один компонент маршрута обрабатывает каждый шаг процесса.
• Каждый компонент маршрута использует FormGroup для обработки проверки формы.
• Проверка формы на всех вкладках должна приводить действительные/недопустимые индикаторы для всех шагов рабочего процесса, показанных в заголовке.
• Вкладка может находиться в одном из трех возможных состояний: Нетронутой (серая проверки: пользователь не коснулся любое поля на вкладке пока), Неполного (красная восклицательный: вкладка была затронута и один или больше полей на вкладке недействительны) Действительно (зеленый проверка:. все необходимые поля содержат допустимые значения

Answer 1

В работе над этой проблемой, я нахожу, что решение требует более высокого уровня архитектурный выбор о государственном управлении nd как обрабатывать & отображать данные приложения. К сожалению, для меня не было ни одного технического решения, как «Использовать этот дизайн библиотеки Angular2 специально для проверки полей в нескольких FormGroups в разных компонентах!» :(

Я надеюсь, что наше исследование является полезным для кого-то еще, моя команда принимает подход Redux используя НПМ модули ngrx-store & ngrx-effects для Angular2. Все данные о приложении & состояние логики обработки (в том числе проверки на нескольких tabs-- мой первоначальный вызов) будут выполняться редукционными действиями &. Благоприятным побочным эффектом является то, что наши контроллеры представлений становятся супер простыми и просто отображают данные, которые им дает ngrx. Это устраняет сложную условную логику, которая зависит от состояния данных, введенных в других областях приложение

В Egghead.io есть useful 10 minute video, в котором представлена ​​библиотека ngrx & шаблоны проектирования.

Надеюсь, это даст вам ногу. Удачи!

Answer 2

Согласен, Redux - это путь.Я документировал шаблон, который я использовал в своем блоге, и открываю исходное приложение: http://heidloff.net/article/angular-2-form-redux-multiple-routes