Angular i formularze reaktywne. Praktyczny przewodnik - ebook

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.

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 komponencie
  • Zmiana wartości kontrolki z poziomu widoku komponentu
  • Zmiana stanu kontrolki z poziomu komponentu
  • Włączanie oraz wyłączanie kontrolki
• Implementacja mechanizmu Control Value Accessor w dyrektywie maskującej
  • Wstęp
  • Tworzenie dyrektywy obsługującej interfejs Control Value Accessor
  • Różnice pomiędzy komponentem a dyrektywąpodczas tworzenia własnych kontrolek
• Implementacja Control Value Accessor dla elementów niebędących elementami formularza
  • Wstęp
  • Dyrektywa dla elementów edytowalnych
• Podsumowanie