Mallstyrda formulär
Bygg snabbt formulär med mallstyrda metoder.
Mallstyrda formulär är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 3 lektioner.
Mallstyrda formulär
Den här lektionen introducerar mallstyrda formulär i Angular, som låter dig snabbt skapa enkla formulär.
Vad är mallstyrda formulär?
Mallstyrda formulär använder HTML-mallar och Angular-direktiv för att enkelt hantera skapande, validering och inskickning av formulär.
Importera FormsModule
Om du vill använda mallstyrda formulär importerar du FormsModule i din Angular-modul:
import { FormsModule } from '@angular/forms';Skapa ett enkelt formulär
Definiera ett enkelt formulär i din mall med direktivet ngForm:
<form #form="ngForm">
<input name="username" ngModel>
</form>Tvåvägsbindning med ngModel
ngModel binder formulärkontroller till komponentegenskaper med hjälp av tvåvägsdatabindning:
<input [(ngModel)]="user.name" name="username">Skicka formulär
Hantera inskickning av formulär enkelt med Angulars händelsebindning:
<form (ngSubmit)="onSubmit(form)" #form="ngForm">Formulärvalidering
Angular tillhandahåller enkla valideringsdirektiv som required och minlength:
<input name="username" ngModel required minlength="4">Åtkomst till formulärtillstånd
Kom åt formulärtillstånd, till exempel giltighet eller statusen touched, via mallvariabler:
<div *ngIf="form.invalid && form.touched">Form is invalid!</div>Sammanfattning
Du har lärt dig att enkelt skapa, binda, validera och skicka formulär med mallstyrda formulär. Fortsätt öva!
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 38
- Lektioner
- 144
Vanliga frågor
Är lektionen ”Mallstyrda formulär” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Mallstyrda formulär”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Mallstyrda formulär”?
Bygg snabbt formulär med mallstyrda metoder. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Angular Academy?
Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Mallstyrda formulär”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Angular Academy-lektionen?
Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mallstyrda formulär
- Reaktiva formulär
- Egen validering