Wzorce FormBuilder
Tworzyć złożone formularze za pomocą FormBuilder
Wzorce FormBuilder to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.
Mniej kodu pomocniczego
FormBuilder to usługa, która tworzy grupy, kontrolki i tablice formularzy za pomocą zwięzłej składni, unikając powtarzalnych wywołań new FormControl(...).
Wstrzykiwanie FormBuilder
Wstrzyknij go do komponentu.
private fb = inject(FormBuilder);Budowanie grupy
fb.group przyjmuje obiekt mapujący nazwy na wartości początkowe (opcjonalnie także walidatory).
form = this.fb.group({
email: ['', Validators.required],
age: [0]
});Krotka: wartość i walidatory
Każdy wpis może być krotką: [initialValue, syncValidators, asyncValidators].
password: ['', [Validators.required, Validators.minLength(8)]]Konstruktor nonnullable
fb.nonNullable tworzy kontrolki, które nigdy nie mają wartości null, więc reset przywraca wartość początkową, a nie null.
form = this.fb.nonNullable.group({
name: '',
active: true
});Dlaczego nonNullable ma znaczenie
W przypadku nonNullable typy wartości nie zawierają | null, a reset() przywraca pierwotną wartość domyślną, czego zazwyczaj oczekujemy.
Budowanie tablic
fb.array tworzy FormArray; można połączyć go z fb.group, aby utworzyć tablice grup.
form = this.fb.group({
items: this.fb.array([])
});Pomocnicza metoda elementów tablicy
Metoda fabrykująca zapewnia spójny sposób tworzenia elementów tablicy.
newItem() {
return this.fb.group({
label: [''],
qty: [1]
});
}Dodawanie elementów
Dodaj utworzoną grupę do tablicy za pomocą push.
get items() {
return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }Jawna konfiguracja kontrolki
Aby zastosować nonNullable do pojedynczej kontrolki, przekaż obiekt opcji zamiast krotki.
token: this.fb.control('', { nonNullable: true })Kiedy używać FormBuilder
Używaj FormBuilder dla czytelności w większych formularzach. Jawne API new FormControl jest równoważne i czasami czytelniejsze w przypadku jednorazowych kontrolek.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat wzorców FormBuilder.
Podsumowanie
Dowiedział się Pan/Dowiedziała się Pani, że FormBuilder (fb.group, fb.control, fb.array) ogranicza ilość powtarzalnego kodu, że krotki zawierają wartość i walidatory oraz że fb.nonNullable tworzy kontrolki bez wartości null, których reset przywraca wartości domyślne.
Często zadawane pytania
Czy lekcja „Wzorce FormBuilder” jest bezpłatna?
Tak — pełny tekst „Wzorce FormBuilder” 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 „Wzorce FormBuilder”?
Tworzyć złożone formularze za pomocą FormBuilder Ć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 4 z 4.
Ile czasu zajmuje lekcja „Wzorce FormBuilder”?
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.