Jak wykonać sprawdzanie formularza na wielu kartach, które sprawdzają się w FormGroup - formularze, sprawdzanie poprawności, karty, przepływ pracy, routing kątowy2

Rozwijam tę aplikację przepływu pracy Angular2zbiera dane na wielu kartach, dostosowując pola na każdej karcie w oparciu o wartości poprzednich kart, a następnie sprawdzając, czy wszystkie karty są wypełniane poprawnie po drodze. Korzystam z routera Angular2, aby kontrolować, który składnik karty wyświetla się i na każdej karcie wykorzystuje FormGroup do obsługi sprawdzania poprawności formularza. (Zobacz poniżej wizualizację hierarchii komponentów i działania aplikacji). Potrzebuję eleganckiego sposobu na obliczenie ważności danych na wszystkich kartach w przepływie pracy, bez konieczności otwierania każdej karty, aby aktywować kontroler i FormGroup walidatory. W idealnym przypadku sprawdzanie poprawności przepływu pracy dla karty będzie korzystało z tej samej logiki, co karty FormGroup walidacja, aby zachować SUCHOŚĆ i spójność.

Gdy użytkownicy dotykają pól, loguję kartę „s” „brudną”stan w bazie danych, więc nie mam problemu ze stwierdzeniem, kiedy karta jest nieskazitelna / brudna. Wyzwanie polega na tym, że gdy użytkownik powróci do wcześniej zapisanego przepływu pracy, jak obliczyć stan poprawny / nieprawidłowy dla wszystkich kart ” dane, gdy użytkownik jeszcze nie dotknął FormGroupna tych kartach?

Dziękujemy za wszelkie sugestie dotyczące wzorów projektowych, które mogą to osiągnąć!

Kilka szczegółów projektu:

• Jeden składnik trasy obsługuje każdy etap przepływu pracy.
• Każdy składnik trasy używa FormGroup do obsługi sprawdzania poprawności formularza.
• Sprawdzanie poprawności formularza na wszystkich kartach musi prowadzić do prawidłowych / nieprawidłowych wskaźników dla wszystkich kroków przepływu pracy, pokazanych w nagłówkach.
• Karta może znajdować się w jednym z trzech możliwych stanów: Dziewiczy (szary zaznacz: użytkownik jeszcze nie dotknął żadnego pola na karcie), Niekompletny (czerwony wykrzyknik: dotknięto karty i jedno lub więcej pól na karcie jest niepoprawnych), Ważny (zielony znacznik: wszystkie wymagane pola zawierają prawidłowe wartości.

Odpowiedzi:

Pracując nad tym problemem, stwierdzam, żerozwiązanie wymaga wyborów architektonicznych wyższego poziomu dotyczących zarządzania stanem oraz sposobu obsługi i wyświetlania danych aplikacji. Niestety dla mnie nie było jednego rozwiązania technicznego, takiego jak „Użyj tego projektu biblioteki Angular2 specjalnie do sprawdzania poprawności pól w wielu grupach FormGroup w różnych składniki!" :(

Mam nadzieję, że nasze badania przydadzą się komuś innemu, mój zespół stosuje podejście Redux przy użyciu modułów npm ngrx-store i efekty ngrx dla Angular2. Wszystkie logiki przetwarzania danych i stanu aplikacji (w tym sprawdzanie poprawności na wielu kartach - moje początkowe wyzwanie) będą obsługiwane przez działania i redukcje Redux. Korzystnym efektem ubocznym jest to, że nasze kontrolery widoku stają się super proste i po prostu wyświetlają dane daje je ngrx, co eliminuje złożoną logikę warunkową zależną od stanu danych wprowadzonych w innych obszarach aplikacji.

Egghead.io ma przydatne 10 minut wideo który wprowadza bibliotekę ngrx i wzorce projektowe.

Mam nadzieję, że to daje ci nogę. Powodzenia!

Zgadzam się, Redux to droga. Udokumentowałem wzór, którego użyłem na swoim blogu i otworzyłem przykładową aplikację: http://heidloff.net/article/angular-2-form-redux-multiple-routes