Vereiste en getransformeerde inputs
Markeer inputs als vereist en transformeer waarden.
Vereiste en getransformeerde inputs is een gratis Angular Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Verder dan basisinputs
Signal-inputs ondersteunen twee krachtige functies: een input markeren als verplicht en binnenkomende waarden transformeren voordat ze worden opgeslagen.
Verplichte inputs
Gebruik input.required() wanneer de ouder altijd een waarde moet aanleveren. Er is geen standaardwaarde.
import { input } from "@angular/core";
export class UserComponent {
userId = input.required<string>();
}Waarom verplicht belangrijk is
Als een verplichte input niet is gebonden, meldt Angular een fout. Zo worden vergissingen vroeg ontdekt in plaats van dat een ongedefinieerde waarde ongemerkt wordt doorgegeven.
<!-- error: userId is required -->
<app-user></app-user>
<!-- correct -->
<app-user [userId]="id"></app-user>Verplichte inputs zijn niet-null
Omdat een verplichte input moet worden aangeleverd, is het type ervan nooit undefined. U kunt de input dus veilig lezen zonder controles op null.
userId = input.required<string>();
load() {
return this.api.get(this.userId()); // always a string
}Inputs transformeren
De optie transform voert een functie uit op de binnenkomende waarde voordat deze wordt opgeslagen. Dit is handig voor typeconversie.
import { input } from "@angular/core";
export class ToggleComponent {
disabled = input(false, { transform: (v: unknown) => !!v });
}Booleaanse typeconversie
Angular levert booleanAttribute om waarden in attribuutstijl om te zetten in echte booleaanse waarden. Dit is handig voor attributen die alleen door hun aanwezigheid betekenis hebben.
import { input, booleanAttribute } from "@angular/core";
disabled = input(false, { transform: booleanAttribute });
<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>Numerieke typeconversie
Op vergelijkbare wijze zet numberAttribute een tekenreeksattribuut om in een getal.
import { input, numberAttribute } from "@angular/core";
count = input(0, { transform: numberAttribute });
<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>Aangepaste transformfuncties
U kunt elke gewenste transform schrijven om waarden te normaliseren, bijvoorbeeld door tekenreeksen bij te snijden.
label = input("", {
transform: (v: string) => v.trim()
});Input- en outputtypen van transforms
Een transform kan het ene type accepteren en een ander type opslaan. Het geaccepteerde type is het type waaraan ouders binden; het opgeslagen type is het type dat u leest.
// accepts string | number, stores number
size = input(0, {
transform: (v: string | number) => Number(v)
});Verplicht en transformeren tegelijk
U kunt required combineren met een transform door het optieobject door te geven aan input.required().
value = input.required({
transform: numberAttribute
});Wanneer gebruikt u welke functie?
Gebruik required om een verplichte binding af te dwingen en transforms om binnenkomende gegevens om te zetten of te normaliseren. Zo blijft uw componentlogica helder en consistent.
Korte controle
Test je begrip van verplichte en getransformeerde inputs.
Samenvatting
Gebruik input.required() voor verplichte inputs (niet-nullbaar, zonder standaardwaarde) en de optie transform, waaronder booleanAttribute en numberAttribute, om waarden om te zetten. U kunt beide combineren.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “Vereiste en getransformeerde inputs” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Vereiste en getransformeerde inputs”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “Vereiste en getransformeerde inputs”?
Markeer inputs als vereist en transformeer waarden. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Vereiste en getransformeerde inputs”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Signalinputs met input()
- Vereiste en getransformeerde inputs
- Outputs met output()
- Viewqueries met viewChild