Angular Academy · Oppitunti

FormBuilder-mallit

Rakentakaa monimutkaisia lomakkeita FormBuilderilla

Oppitunti 4/413 vaihetta

FormBuilder-mallit on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Vähemmän toistuvaa koodia

FormBuilder on palvelu, joka rakentaa lomakeryhmiä, ohjaimia ja taulukoita tiiviillä syntaksilla. Näin vältetään toistuvat new FormControl(...)-kutsut.

FormBuilderin injektointi

Injektoi se komponenttiisi.

private fb = inject(FormBuilder);

Ryhmän rakentaminen

fb.group ottaa vastaan olion, joka yhdistää nimet alkuarvoihin ja voi sisältää myös validoijia.

form = this.fb.group({
  email: ['', Validators.required],
  age: [0]
});

Arvon ja validoijien tuple

Jokainen alkio voi olla tuple: [initialValue, syncValidators, asyncValidators].

password: ['', [Validators.required, Validators.minLength(8)]]

Nonnullable-rakentaja

fb.nonNullable tuottaa ohjaimia, jotka eivät koskaan ole null-arvoja. Siksi nollaus palauttaa alkuarvon eikä arvoa null.

form = this.fb.nonNullable.group({
  name: '',
  active: true
});

Miksi nonNullable on tärkeä

nonNullable-asetuksella arvotyypeistä poistuu | null ja reset() palauttaa alkuperäisen oletusarvon, mikä on yleensä toivottua.

Taulukoiden rakentaminen

fb.array luo FormArrayn. Yhdistä se fb.group-funktioon ryhmätaulukoita varten.

form = this.fb.group({
  items: this.fb.array([])
});

Taulukon alkioiden apufunktio

Tehdasmetodi pitää taulukon alkioiden luonnin yhdenmukaisena.

newItem() {
  return this.fb.group({
    label: [''],
    qty: [1]
  });
}

Alkioiden lisääminen

Lisää rakennettu ryhmä taulukkoon push-metodilla.

get items() {
  return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }

Ohjaimen eksplisiittinen määritys

Kun haluat käyttää nonNullable-asetusta yksittäisessä ohjaimessa, välitä tuplen sijaan options-objekti.

token: this.fb.control('', { nonNullable: true })

Milloin FormBuilderia kannattaa käyttää

Käytä FormBuilderia suurempien lomakkeiden selkeyden parantamiseen. Eksplisiittinen new FormControl-rajapinta toimii yhtä hyvin ja voi olla selkeämpi yksittäisissä ohjaimissa.

Pikatarkistus

Testaa, kuinka hyvin ymmärrät FormBuilder-mallit.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit, että FormBuilder (fb.group, fb.control, fb.array) vähentää toistuvaa koodia, tuplet sisältävät arvon ja validoijat ja fb.nonNullable tuottaa ei-null-arvoisia ohjaimia, joiden nollaus palauttaa oletusarvot.

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 ”FormBuilder-mallit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “FormBuilder-mallit”. 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 ”FormBuilder-mallit”?

Rakentakaa monimutkaisia lomakkeita FormBuilderilla 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 4/4.

Kuinka kauan ”FormBuilder-mallit”-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