Angular i formularze reaktywne. Praktyczny przewodnik Strzyżów

Bez nich strony internetowe byłyby jedynie nowoczesnymi prezentacjami Ewolucja formularzy internetowych zaczęła się od prostych znaczników języka HTML 2.0 opublikowanego w 1993 roku. Z czasem HTML oferował bardziej zaawansowane funkcje obsługi formularzy. Późniejsze wersje, HTML4, a następnie HTML5, wprowadziły nowe typy pól, takie jak pola daty, koloru czy też adresu e-mail. Rozszerzyły również natywną walidację danych poprzez wprowadzenie nowych atrybutów dla znaczników. Jednak prawdziwa rewolucja w projektowaniu formularzy internetowych nastąpiła z chwilą pojawienia się bibliotek opartych na języku JavaScript. Umożliwiły one tworzenie dynamicznych formularzy z walidacją na żywo i interaktywnymi elementami, a to pozwoliło przekształcić witryny internetowe w pełnoprawne aplikacje. Obecnie frameworki takie jak Angular przenoszą formularze internetowe na nowy poziom. Oferują potężne narzędzia do tworzenia skomplikowanych formularzy z zaawansowaną walidacją, wiązaniem danych i logiką biznesową. Dzięki temu twórcy aplikacji mogą się skupić na tworzeniu atrakcyjniejszych interfejsów użytkownika i zapewniać lepsze doświadczenia dla użytkowników. Ta książka przybliża sposób funkcjonowania mechanizmów obsługi formularzy w ujęciu reaktywnym w środowisku Angular. Omawia budowę API formularzy i analizuje, w jaki sposób poszczególne elementy tego systemu są ze sobą powiązane. Prezentuje proces przepływu danych, a także ich walidacji. Analizuje praktyczne zastosowania poznanych mechanizmów - od tworzenia własnych reguł walidacji po kreowanie mechanizmów, jak wysyłanie plików czy maskowanie wartości kontrolek. Przedstawia też metody budowania złożonych struktur formularzy i niestandardowych kontrolek. Spis treści: Wstęp Rozdział 1. Budowa formularzy reaktywnych Wstęp Natywna obsługa formularzy Struktura formularzy w środowisku Angular Rozdział 2. Jak Angular ustala typy wartości kontrolek Wstęp Typ wartości pojedynczej kontrolki Typ dla grup kontrolek Typ dla tablicy kontrolek Kontrolki nietypowane Podsumowanie Rozdział 3. Modyfikacja drzewa formularza Wstęp Zmiana rodzica Dodawanie kontrolek do grup Dodawanie kontrolek do obiektów tablicowych Usuwanie kontrolek formularza z grup Usuwanie kontrolek z tablic Podmiana kontrolki w grupie Podmiana kontrolki w tablicy Zmiana kolejności kontrolek w obiektach tablicowych Podsumowanie Rozdział 4. Aktualizacja wartości i stanu formularza Mechanizm aktualizacji formularza Wartość pola statusChanges Wartość pola valueChanges Wyciek pamięci w polach valueChanges i statusChanges Zmiana momentu aktualizacji Rozdział 5. Zmiana wartości formularza Wstęp Zmiana wartości za pomocą metody setValue Zmiana wartości za pomocą metody patchValue Przywracanie danych początkowych z użyciem metody reset Definiowanie typu dla wartości formularza Rozdział 6. Pobieranie danych formularza Wstęp Pole value Pole defaultValue Metoda getRawValue Pole valueChanges Podsumowanie Rozdział 7. Stan i status formularza Wstęp Status wskazujący na poprawność danych Status nierozstrzygnięty Aktywacja i dezaktywowanie kontrolek Stany kontrolek Rozdział 8. Wpływanie na przepływ danych Wstęp Ograniczenie emisji eventów jedynie do aktualizowanej kontrolki Blokowanie emisji eventów aktualizacyjnych Blokowanie przesyłu danych do widoku Blokowanie przesyłu danych z widoku do modelu Podsumowanie Rozdział 9. Usługa FormBuilder Wstęp Tworzenie kontrolki Tworzenie grup Tworzenie rekordów Tworzenie tablic FormBuilder i formularze słabo typowane Podsumowanie Rozdział 10. Praca z różnymi typami kontrolek Wstęp Praca z kontrolkami checkbox oraz checkbox group Praca z kontrolkami typu radio button Praca z kontrolkami typu select Praca z kontrolkami typu multiple select Praca z kontrolkami typu range Praca z kontrolkami typu number Podsumowanie Rozdział 11. Walidacja Wstęp Obiekt błędów Walidacja a klasy CSS Walidacja natywna Walidatory wbudowane we framework Angular Funkcja compose Metoda validator Ręczna obsługa błędów walidacji Pobieranie informacji o błędach Własne reguły walidacji Walidatory z parametrami Cross-field validation Walidacja warunkowa Walidacja asynchroniczna Walidator asynchroniczny z zależnościami Dodawanie i usuwanie walidatorów asynchronicznych Lazy loading walidatorów asynchronicznych Podsumowanie Rozdział 12. Przesyłanie plików Wstęp Konfiguracja środowiska Przesyłanie plików za pomocą klasycznych formularzy Przesyłanie plików za pomocą technologii AJAX Przesyłanie plików z wykorzystaniem frameworka Angular Wpływanie na proces przesyłu Podgląd przesyłanego pliku Implementacja mechanizmu Drag&Drop Walidacja przesyłanych plików Wysyłanie kilku plików jednocześnie Podsumowanie Rozdział 13. Maskowanie wartości kontrolek Wstęp Dyrektywa maskująca Rozdział 14. Formularz wielokrokowy Wstęp Przygotowanie formularza zamówienia Widok wielokrokowy Model wielokomponentowy Model wielokomponentowy oparty na routingu Podsumowanie Rozdział 15. Dynamiczne formularze Wstęp Prosty mechanizm generujący formularz Implementacja pól jednokrotnego i wielokrotnego wyboru Walidacja danych dynamicznych Model oparty na komponentach Optymalizacja procesu ładowania Podsumowanie Rozdział 16. Tworzenie własnych kontrolek Wstęp Control Value Accessor Implementacja mechanizmu Control Value Accessor w komponencie typu counter Aktualizacja widoku w komponencieZmiana wartości kontrolki z poziomu widoku komponentuZmiana stanu kontrolki z poziomu komponentuWłączanie oraz wyłączanie kontrolkiImplementacja mechanizmu Control Value Accessor w dyrektywie maskującej WstępTworzenie dyrektywy obsługującej interfejs Control Value AccessorRóżnice pomiędzy komponentem a dyrektywąpodczas tworzenia własnych kontrolekImplementacja Control Value Accessor dla elementów niebędących elementami formularza WstępDyrektywa dla elementów edytowalnychPodsumowanie O autorze: Grzegorz Dąbrowski - z wykształcenia inżynier oprogramowania. Entuzjasta technologii webowych. Ma kilkunastoletnie doświadczenie w projektach międzynarodowych, rozwijał aplikacje typu enterprise i pomagał początkującym programistom w rozwoju zawodowym. Obecnie interesuje go głównie framework Angular wraz z powiązanymi z nim technologiami. W wolnym czasie zwiedza z rodziną Bałkany i jeździ na elektrycznym monocyklu.