Wróć do strony głównej

Zagnieżdżone formularze z ControlContainer

Tworzysz zagnieżdżony formularz? Chcesz, żeby poszczególne kroki formularza występowały na różnych ścieżkach routingu? Jeśli tak, to ten wpis jest dla Ciebie 😉 Poznaj moc ControlContainer!

Artykuł napisano na podstawie wystąpienia Jennifer Wadella podczas tegorocznego ngConf, którego byliśmy partnerem. Niestety wystąpienie nie zostało jeszcze udostępnione na oficjalnym kanale YouTube ng-Conf. Jak tylko się pojawi, dołączymy je do artykułu.

ControlContainer

Jak możemy przeczytać w dokumentacji – “ControlContainer jest klasą bazową dla dyrektyw, które zawierają wiele zarejestrowanych instancji NgControl”. Tego typu dyrektywą jest np. FormGroup. Spoglądając w kod źródłowy, zauważymy, że providuje ona samą siebie jako ControlContainer.

Po nałożeniu wspomnianej dyrektywy na dowolny DOM element, będziemy mogli wstrzyknąć ControlContainer (w tym wypadku będący instancją FormGroupDirective) wewnątrz tego elementu oraz jego childów. A wszystko za sprawą rozwiązywania zależności przez ElementInjector.

Implementacja

Użycie ControlContainer przedstawimy na przykładzie formularza do składania zamówień. Składa się on z dwóch kroków:

  1. podanie adresu wysyłki
  2. podanie karty kredytowej do zapłaty

Każdy z kroków znajduje się na innej ścieżce routingu.

Implementację, zaczniemy od parent komponentu, wewnątrz którego będziemy przetrzymywali instancję naszego formularza.

Inicjuje on formularz, który następnie przekazujemy do dyrektywy [formGroup] nałożonej na element form w widoku. Wewnątrz <form> w miejsce <router-outlet> będzie wyświetlany odpowiedni krok formularza w zależności od ścieżki, na której się znajdujemy.

Następnie do child komponentu, będącego reprezentantem jednego z kroków, wstrzykujemy ControlContainer, poprzez który uzyskujemy dostęp do dyrektywy [formGroup] z parenta. Reszta jest już formalnością. Z uzyskanej instancji FormGroupDirective pobieramy interesującą nas pole formularza oraz wiążemy je z naszym widokiem.

W zależności, od preferowanego przez Ciebie sposobu implementacji i reużywania komponentów, możesz skorzystać z ControlContainera dwojako:

  • wybierając interesujące Cię pole formularza na poziomie child komponentu:


    Aczkolwiek to rozwiązanie zobowiązuje, Cię do nazywania pobieranego pola w child komponencie jednakowo na przestrzeni całej aplikacji.
  • przekazywać bezpośrednio do childa pole, którym ma on się posługiwać. Tutaj z poziomu parenta kontrolujemy to, do jakiego pola formularza nasz child uzyska dostęp:


    Gdzie selectedStep w tym wypadku to – creditCard lub address w zależności od ścieżki na, której się znajdujemy.

Tym prostym sposobem, zaimplementowaliśmy multi step form, na różnych routach. 

Kod źródłowy do kompletnego rozwiązania: https://stackblitz.com/edit/angular-love-cc
Z
achęcam Was również do zapoznania się z ciekawym zastosowaniem ControlContainera, które na swoim blogu przedstawił Netanel Basal.

O autorze

Mateusz Stefańczyk

Zapalony redaktor angular.love. W portalu od wielu lat. Miłośnik konsol maści wszelakiej i najróżniejszych indyczków:) Fan piłki nożnej zarówno tej prawdziwej, jak i wirtualnej. Każdego weekendu siada głęboko w fotelu, zapina pasy i rozkoszuję się europejskimi rozgrywkami.

Chcesz razem z nami tworzyć treści na bloga? Dołącz do nas i twórz wartościowe treści dla sympatyków Angulara z Angular.love!

4 komentarzy

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *