Angular Academy · Oppitunti

FormArray ja dynaamiset kentät

Lisätkää ja poistakaa lomakekontrolleja ajon aikana

Oppitunti 2/413 vaihetta

FormArray ja dynaamiset kentät on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Dynaamiset kenttäjoukot

Joissakin lomakkeissa kenttien määrä vaihtelee, esimerkiksi puhelinnumeroluettelossa tai rivikohteissa. FormArray hallitsee järjestettyä ja kasvavaa ohjainten kokoelmaa.

FormArrayn luominen

FormArray sisältää taulukon ohjaimia tai ryhmiä.

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

FormGroupin sisällä

Upota taulukko ylemmän tason ryhmään, jotta se kuuluu koko lomakkeen arvoon.

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

Ohjainten lisääminen

Kutsu push-metodia lisätäksesi uuden ohjaimen dynaamisesti.

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

Ohjainten poistaminen

Poista tietty ohjain käyttämällä removeAt(index)-metodia.

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

Renderöinti @for-rakenteella

Käy mallineessa läpi taulukon ohjaimet ja sido kukin niistä indeksin avulla formControlName-direktiiviin.

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

formArrayName-direktiivi

formArrayName yhdistää mallineen lohkon taulukkoon, ja sisempi formControlName käyttää numeerista indeksiä.

Ryhmätaulukot

Monipuolisempia kohteita varten tallenna taulukkoon FormGroup-ryhmiä, esimerkiksi yhteystietoja, joilla kullakin on nimi ja numero.

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

Ryhmäkohteiden renderöinti

Käytä indeksin kanssa formGroupName-direktiiviä taulukon jokaiseen ryhmään.

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

Arvon lukeminen

Taulukon arvo on tavallinen taulukko oikeassa järjestyksessä ja vastaa nykyisiä ohjaimia.

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

Taulukon tyhjentäminen

clear() poistaa kaikki ohjaimet kerralla. Se on kätevä dynaamisen osion nollaamisessa.

this.phones.clear();

Pikatarkistus

Testaa, kuinka hyvin ymmärrät FormArrayn.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit, että FormArray hallitsee dynaamista ja järjestettyä ohjainten tai ryhmien kokoelmaa push-, removeAt- ja clear-metodien avulla. Se renderöidään käyttämällä formArrayName-direktiiviä sekä indeksoituja formControlName- ja formGroupName-direktiivejä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”FormArray ja dynaamiset kentät” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “FormArray ja dynaamiset kentät”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”FormArray ja dynaamiset kentät”?

Lisätkää ja poistakaa lomakekontrolleja ajon aikana Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”FormArray ja dynaamiset kentät”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy