Nie jest moim zamiarem przygotowanie tutoriala dla początkujących z zagadnień Angulara. W tym celu zachęcam do odwiedzenia https://angular.io/tutorial. Każdy, kto zaczyna zabawę z Angularem pierwsze kroki stawia z pomocą tej strony.

Moim celem jest podzielenie się sposobami rozwiązania zadań, które spotkałam na drodze tworzenia aplikacji. Jeśli znacie lepszy sposób czy krótszy zapis implementacji danego zagadnienia, podzielcie się śmiało w komentarzach 🙂

Wstęp był, no to zaczynamy od pierwszego zadania. Taka sytuacja: mamy listę umiejętności. Chcemy, aby użytkownik zaznaczył te, które posiada.
Hmmm… Czyli zaznacza, może odznaczyć, a my musimy jakoś zbierać i uaktualniać informację.

Zaczynamy od stworzenia forma z wykorzystaniem formBuildera.

Nasze “skills” będzie tablicą przechowującą zaznaczone pozycje. W kodzie html nie umieszczany jednak formControlName=”skills”. Zamiast tego na zmianie stanu checkboxa ( funkcja change) wywołujemy funkcję. Jako parametr przekazujemy wartość odpowiadającą elementowi, na którym wykonana została akcja (zaznaczenia lub odznaczenia).

No to teraz sama wspomniana funkcja (toggleSkills()). Krok po kroku…

Po pierwsze przy każdym kliku tworzymy tablicę (arrayValue) odpowiadającą zawartości pola skills utworzonego w registerForm. Następnie sprawdzamy czy w tej utworzonej tablicy znajduje się kliknięta wartość (indexOf). Jeśli nie, to znaczy, że ją zaznaczyliśmy i dodajemy wartość do tablicy. Jeśli tak, to wartość odznaczamy i trzeba ją usunąć z tablicy.

Ostatecznie trzeba wykonać jeszcze jedną operację. Należy uaktualnić wartość pola skills w registerForm poprzez  funkcję setValue().

Mamy działającą listę checkboxów, z których zbieramy informacje i przechowujemy w tablicy 🙂 Kolejny wpis będzie dotyczył radio buttonów w Angularze.

Author: