PricingLoginStart free
Angular Academy · leksjon

Påkrevde og transformerende inputverdier

Merk inputverdier som påkrevde, og transformer dem.

Leksjon 2 av 413 trinn

Påkrevde og transformerende inputverdier er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Utover grunnleggende inndata

Signalbaserte inndata støtter to kraftige funksjoner: å merke et inndata som påkrevd og å transformere innkommende verdier før de lagres.

Påkrevde inndata

Bruk input.required() når forelderen alltid må oppgi en verdi. Det finnes ingen standardverdi.

import { input } from "@angular/core";

export class UserComponent {
  userId = input.required<string>();
}

Hvorfor påkrevde inndata er viktige

Hvis et påkrevd inndata ikke er bundet, rapporterer Angular en feil. Dermed oppdages feil tidlig i stedet for at en udefinert verdi slipper gjennom.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Påkrevde inndata er ikke-nullbare

Fordi et påkrevd inndata må oppgis, er typen aldri undefined. De kan derfor lese det trygt uten null-sjekker.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Transformere inndata

Alternativet transform kjører en funksjon på den innkommende verdien før den lagres, noe som er nyttig for typekonvertering.

import { input } from "@angular/core";

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Boolsk typekonvertering

Angular leveres med booleanAttribute, som konverterer attributtverdier til ekte boolske verdier. Dette er nyttig for attributter der tilstedeværelse angir verdi.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Talltypekonvertering

Tilsvarende konverterer numberAttribute et strengattributt til et tall.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Egendefinerte transformasjonsfunksjoner

De kan skrive en hvilken som helst transformasjon for å normalisere verdier, for eksempel ved å fjerne mellomrom fra strenger.

label = input("", {
  transform: (v: string) => v.trim()
});

Typer for inndata og resultat av transformasjon

En transformasjon kan ta imot én type og lagre en annen. Typen som godtas, er typen foreldrene binder til; den lagrede typen er typen De leser.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Påkrevd og transformasjon sammen

De kan kombinere påkrevd med en transformasjon ved å sende et options-objekt til input.required().

value = input.required({
  transform: numberAttribute
});

Når bør de ulike brukes?

Bruk required for å håndheve en obligatorisk binding, og transformasjoner for å konvertere eller normalisere innkommende data. Slik holder De komponentlogikken ryddig og konsekvent.

Kort sjekk

Test forståelsen Deres av påkrevde og transformerte inndata.

Besvar den i den interaktive leksjonen

Oppsummering

Bruk input.required() for obligatoriske inndata (ikke-nullbare og uten standardverdi), og alternativet transform, inkludert booleanAttribute og numberAttribute, for å konvertere verdier. Begge kan kombineres.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
38
Leksjoner
144
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Påkrevde og transformerende inputverdier» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Påkrevde og transformerende inputverdier», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Påkrevde og transformerende inputverdier»?

Merk inputverdier som påkrevde, og transformer dem. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Påkrevde og transformerende inputverdier»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Signalinput med input()
  2. Påkrevde og transformerende inputverdier
  3. Outputs med output()
  4. Visningsspørringer med viewChild
← Tilbake til Angular Academy