Angular Academy · Lezione

Form reattivi tipizzati

Creare form con tipizzazione rigorosa

Form reattivi tipizzati è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Perché utilizzare i form tipizzati?

Prima di Angular 14, i valori dei form reattivi erano tipizzati come any. I form reattivi tipizzati offrono la piena sicurezza dei tipi: il compilatore conosce la struttura del valore del form e i nomi dei controlli.

Un FormControl tipizzato

Un FormControl è generico. Fornisca il tipo del valore, così le operazioni di lettura e scrittura vengono verificate.

const name = new FormControl<string>('', {
  nonNullable: true
});

Un FormGroup tipizzato

Un FormGroup deduce il tipo del proprio valore dai controlli passati.

const form = new FormGroup({
  email: new FormControl(''),
  age: new FormControl(0)
});

Tipo del valore dedotto

Il value del gruppo precedente è tipizzato come { email: string | null; age: number | null } e viene verificato in fase di compilazione.

const v = form.value; // typed automatically

Nullabilità

Per impostazione predefinita, i controlli possono essere reimpostati a null, quindi il loro tipo di valore include | null. Utilizzi nonNullable per escludere null.

new FormControl('', { nonNullable: true });
// value type: string (no null)

Accedere ai controlli in sicurezza

form.controls.email è fortemente tipizzato, quindi il compilatore rileva gli errori di battitura nei nomi dei controlli.

form.controls.email.setValue('a@b.com');

get e controls

Preferisca form.controls.name a form.get('name') per una maggiore sicurezza dei tipi; get restituisce un AbstractControl | null tipizzato in modo debole.

getRawValue

getRawValue() restituisce tutti i valori, inclusi quelli dei controlli disabilitati, a differenza di value, che omette i controlli disabilitati.

const all = form.getRawValue();

Gruppi annidati

I gruppi tipizzati sono componibili. Un FormGroup annidato contribuisce con la propria struttura tipizzata al valore del gruppo padre.

const form = new FormGroup({
  user: new FormGroup({
    first: new FormControl(''),
    last: new FormControl('')
  })
});

Sicurezza dei tipi con patchValue

patchValue accetta un sottoinsieme del valore del form; le chiavi sconosciute vengono segnalate dal compilatore.

form.patchValue({ email: 'x@y.com' });

Migrare i form legacy

Le API non tipizzate, come UntypedFormGroup, esistono per consentire una migrazione graduale. Il nuovo codice dovrebbe utilizzare le classi tipizzate per maggiore sicurezza.

Controllo rapido

Verifichi la Sua comprensione dei form reattivi tipizzati.

Riepilogo

Ha imparato che i form reattivi tipizzati rendono generici FormControl/FormGroup, deducendo una struttura del valore verificata, che i valori predefiniti includono | null (evitabile con nonNullable) e che l'accesso tramite controls è più sicuro di get.

Domande Frequenti

La lezione «Form reattivi tipizzati» è gratuita?

Sì — il testo completo di «Form reattivi tipizzati» è 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 «Form reattivi tipizzati»?

Creare form con tipizzazione rigorosa 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 1 di 4.

Quanto tempo richiede la lezione «Form reattivi tipizzati»?

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