Angular Academy · Lezione

Input obbligatori e trasformati

Contrassegni gli input come obbligatori e ne trasformi i valori.

Input obbligatori e trasformati è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Oltre gli input di base

Gli input signal supportano due funzionalità potenti: contrassegnare un input come obbligatorio e trasformare i valori ricevuti prima che vengano memorizzati.

Input obbligatori

Utilizzi input.required() quando il componente padre deve sempre fornire un valore. Non esiste un valore predefinito.

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

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

Perché gli input obbligatori sono importanti

Se un input obbligatorio non è associato, Angular segnala un errore, individuando subito gli errori invece di consentire il passaggio inosservato di un valore undefined.

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

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

Gli input obbligatori non sono null

Poiché un input obbligatorio deve essere fornito, il suo tipo non è mai undefined; può quindi leggerlo in sicurezza senza controlli null.

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

Trasformazione degli input

L'opzione transform esegue una funzione sul valore ricevuto prima che venga memorizzato, risultando utile per la conversione dei tipi.

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

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

Conversione a booleano

Angular include booleanAttribute per convertire i valori in stile attributo in veri booleani, utile per gli attributi basati sulla presenza.

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

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

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

Conversione a numero

Analogamente, numberAttribute converte un attributo stringa in un numero.

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

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

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

Funzioni di trasformazione personalizzate

Può scrivere qualsiasi trasformazione per normalizzare i valori, ad esempio rimuovendo gli spazi dalle stringhe.

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

Tipi di input e output della trasformazione

Una trasformazione può accettare un tipo e memorizzarne un altro. Il tipo accettato è quello a cui si associano i componenti padre; il tipo memorizzato è quello che si legge.

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

Obbligatorio e trasformazione insieme

Può combinare required con una trasformazione passando l'oggetto delle opzioni a input.required().

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

Quando utilizzare ciascuna opzione

Utilizzi required per imporre un'associazione obbligatoria e le trasformazioni per convertire o normalizzare i dati ricevuti, mantenendo la logica del componente pulita e coerente.

Verifica rapida

Verifichi la Sua comprensione degli input obbligatori e trasformati.

Riepilogo

Utilizzi input.required() per gli input obbligatori (non nullable e senza valore predefinito) e l'opzione transform, inclusi booleanAttribute e numberAttribute, per convertire i valori. Le due opzioni possono essere combinate.

Domande Frequenti

La lezione «Input obbligatori e trasformati» è gratuita?

Sì — il testo completo di «Input obbligatori e trasformati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Input obbligatori e trasformati»?

Contrassegni gli input come obbligatori e ne trasformi i valori. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Input obbligatori e trasformati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy