Typowane formularze reaktywne
Budować formularze z restrykcyjnym typowaniem
Typowane formularze reaktywne to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Dlaczego formularze typowane?
Przed Angular 14 wartości reaktywnych formularzy miały typ any. Typowane formularze reaktywne zapewniają pełne bezpieczeństwo typów: kompilator zna strukturę wartości formularza oraz nazwy jego kontrolek.
Typowany FormControl
FormControl jest generyczny. Należy podać typ wartości, aby odczyty i zapisy były sprawdzane.
const name = new FormControl<string>('', {
nonNullable: true
});Typowany FormGroup
FormGroup wywnioskuje typ swojej wartości na podstawie przekazanych kontrolek.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Wywnioskowany typ wartości
value powyższej grupy ma typ { email: string | null; age: number | null }, a całość jest sprawdzana w czasie kompilacji.
const v = form.value; // typed automaticallyMożliwość wartości null
Domyślnie kontrolki można resetować do wartości null, dlatego ich typ wartości zawiera | null. Użyj nonNullable, aby wykluczyć wartość null.
new FormControl('', { nonNullable: true });
// value type: string (no null)Bezpieczny dostęp do kontrolek
form.controls.email jest silnie typowany, więc literówki w nazwach kontrolek są wykrywane przez kompilator.
form.controls.email.setValue('a@b.com');get a controls
Ze względów bezpieczeństwa typów preferuj form.controls.name zamiast form.get('name'); get zwraca luźno typowany AbstractControl | null.
getRawValue
getRawValue() zwraca wszystkie wartości, w tym wartości kontrolek wyłączonych, w przeciwieństwie do value, które pomija wyłączone kontrolki.
const all = form.getRawValue();Zagnieżdżone grupy
Typowane grupy można łączyć. Zagnieżdżony FormGroup wnosi własną typowaną strukturę do wartości grupy nadrzędnej.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Bezpieczeństwo typów patchValue
patchValue przyjmuje częściową wersję wartości formularza; nieznane klucze są oznaczane przez kompilator.
form.patchValue({ email: 'x@y.com' });Migracja starszych formularzy
Nietypowane API, takie jak UntypedFormGroup, umożliwia stopniową migrację. W nowym kodzie należy używać typowanych klas, aby zapewnić bezpieczeństwo.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat typowanych reaktywnych formularzy.
Podsumowanie
Dowiedział się Pan/Dowiedziała się Pani, że typowane formularze reaktywne sprawiają, iż FormControl/FormGroup są generyczne i wywnioskują sprawdzaną strukturę wartości, że wartości domyślne zawierają | null (czemu można zapobiec za pomocą nonNullable) oraz że dostęp przez controls jest bezpieczniejszy niż użycie get.
Często zadawane pytania
Czy lekcja „Typowane formularze reaktywne” jest bezpłatna?
Tak — pełny tekst „Typowane formularze reaktywne” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Typowane formularze reaktywne”?
Budować formularze z restrykcyjnym typowaniem Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Typowane formularze reaktywne”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Typowane formularze reaktywne
- FormArray i pola dynamiczne
- Walidatory asynchroniczne
- Wzorce FormBuilder