0Pricing
Angular Academy · Lekcja

FormArray i pola dynamiczne

Dodawać i usuwać kontrolki formularza w czasie działania programu

FormArray i pola dynamiczne to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 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.

Dynamiczne zestawy pól

Niektóre formularze mają zmienną liczbę pól, na przykład listę numerów telefonów lub pozycji. FormArray zarządza uporządkowaną, rozszerzalną kolekcją kontrolek.

Tworzenie FormArray

FormArray przechowuje tablicę kontrolek lub grup.

const phones = new FormArray([
  new FormControl(''),
  new FormControl('')
]);

Wewnątrz FormGroup

Umieść tablicę w grupie nadrzędnej, aby stała się częścią całej wartości formularza.

const form = new FormGroup({
  name: new FormControl(''),
  phones: new FormArray<FormControl<string>>([])
});

Dodawanie kontrolek

Wywołaj push, aby dynamicznie dodać nową kontrolkę na końcu.

addPhone() {
  this.phones.push(new FormControl('', { nonNullable: true }));
}

Usuwanie kontrolek

Użyj removeAt(index), aby usunąć określoną kontrolkę.

removePhone(i: number) {
  this.phones.removeAt(i);
}

Renderowanie za pomocą @for

Iteruj po kontrolkach tablicy w szablonie, wiążąc każdą z nich według indeksu za pomocą formControlName.

<div formArrayName="phones">
  @for (ctrl of phones.controls; track $index) {
    <input [formControlName]="$index" />
  }
</div>

Dyrektywa formArrayName

formArrayName łączy blok szablonu z tablicą, a wewnętrzna dyrektywa formControlName używa indeksu liczbowego.

Tablice grup

W przypadku bardziej rozbudowanych elementów przechowuj w tablicy obiekty FormGroup, na przykład dane kontaktowe zawierające imię i numer.

const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
  label: new FormControl(''),
  number: new FormControl('')
}));

Renderowanie elementów grupy

Użyj formGroupName wraz z indeksem dla każdej grupy w tablicy.

@for (g of contacts.controls; track $index) {
  <div [formGroupName]="$index">
    <input formControlName="label" />
    <input formControlName="number" />
  </div>
}

Odczytywanie wartości

Wartość tablicy jest zwykłą tablicą uporządkowaną zgodnie z bieżącymi kontrolkami.

const list = this.phones.value; // string[]

Czyszczenie tablicy

clear() usuwa wszystkie kontrolki jednocześnie, co jest przydatne podczas resetowania dynamicznej sekcji.

this.phones.clear();

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat FormArray.

Podsumowanie

Dowiedział się Pan/Dowiedziała się Pani, że FormArray zarządza dynamiczną, uporządkowaną kolekcją kontrolek lub grup za pomocą metod push, removeAt i clear, a jej elementy są renderowane przy użyciu formArrayName oraz indeksowanych formControlName/formGroupName.

Często zadawane pytania

Czy lekcja „FormArray i pola dynamiczne” jest bezpłatna?

Tak — pełny tekst „FormArray i pola dynamiczne” 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 „FormArray i pola dynamiczne”?

Dodawać i usuwać kontrolki formularza w czasie działania programu Ć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 2 z 4.

Ile czasu zajmuje lekcja „FormArray i pola dynamiczne”?

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

  1. Typowane formularze reaktywne
  2. FormArray i pola dynamiczne
  3. Walidatory asynchroniczne
  4. Wzorce FormBuilder
← Powrót do Angular Academy