Angular Academy · Oppitunti

Mallipohjaiset lomakkeet

Rakentakaa lomakkeita nopeasti mallipohjaisilla menetelmillä.

Oppitunti 1/310 vaihetta

Mallipohjaiset lomakkeet on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. 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ä 3 oppituntia.

Lomakkeet mallipohjaisesti

Tässä oppitunnissa tutustutte Angularin mallipohjaisiin lomakkeisiin, joiden avulla voitte rakentaa nopeasti yksinkertaisia lomakkeita.

Mitä mallipohjaiset lomakkeet ovat

Mallipohjaiset lomakkeet käyttävät HTML-malleja ja Angular-direktiivejä lomakkeiden luomiseen, validointiin ja lähettämiseen.

FormsModulen tuominen

Käyttääksesi mallipohjaisia lomakkeita tuo FormsModule Angular-moduuliisi:

import { FormsModule } from '@angular/forms';

Yksinkertaisen lomakkeen luominen

Määritä malliin yksinkertainen lomake käyttämällä ngForm-direktiiviä:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

Kaksisuuntainen sidonta ngModelillä

ngModel sitoo lomakekontrollit komponentin ominaisuuksiin kaksisuuntaisen tietosidonnan avulla:

<input [(ngModel)]="user.name" name="username">

Lomakkeen lähettäminen

Käsittele lomakkeen lähetys helposti Angularin tapahtumasidonnan avulla:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Lomakkeen validointi

Angular tarjoaa helppokäyttöisiä validointidirektiivejä, kuten required ja minlength:

<input name="username" ngModel required minlength="4">

Lomakkeen tilan käyttäminen

Käytä lomakkeen tilaa, kuten kelvollisuutta tai kosketustilaa, mallimuuttujien kautta:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Yhteenveto

Olette oppineet luomaan, sitomaan, validoimaan ja lähettämään lomakkeita helposti mallipohjaisten lomakkeiden avulla. Jatkakaa harjoittelua!

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 ”Mallipohjaiset lomakkeet” ilmainen?

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

Mitä opin oppitunnilla ”Mallipohjaiset lomakkeet”?

Rakentakaa lomakkeita nopeasti mallipohjaisilla menetelmillä. 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 1/3.

Kuinka kauan ”Mallipohjaiset lomakkeet”-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