Scrivere e registrare i valori
Implementare writeValue e i callback delle modifiche
Scrivere e registrare i valori è 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.
Due metodi fondamentali
Il cuore di un value accessor consiste nel trasferire i dati in entrambe le direzioni: writeValue porta il valore del modello nella vista, mentre il callback di registerOnChange invia le modifiche dell'utente al modello.
writeValue
Angular chiama writeValue quando il form imposta o reimposta il valore del controllo. Lo memorizzi nello stato del componente, così la vista lo riflette.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Gestire null
writeValue può ricevere null durante un reset. Lo normalizzi a un valore predefinito sicuro, così il template non genera errori.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular fornisce un callback da chiamare ogni volta che il valore cambia. Lo salvi: lo invocherà in risposta alle interazioni dell'utente.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Emettere le modifiche
Quando l'utente interagisce, aggiorni lo stato interno e chiami il callback onChange memorizzato con il nuovo valore, così da aggiornare il modello del form.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Collegare il template
Il template visualizza lo stato corrente e attiva il gestore in risposta alle azioni dell'utente, che a sua volta chiama onChange.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Mantenere sincronizzata la vista
Poiché writeValue aggiorna lo stato interno e il template vi esegue il binding, le modifiche programmatiche al form (come patchValue) si riflettono immediatamente nel componente.
Compatibile con OnPush
Con il rilevamento delle modifiche OnPush, aggiorni lo stato tramite i campi del componente e lasci che siano i binding a reagire. Se esegue modifiche da sorgenti asincrone, richiami il controllo o usi i signals per mantenere aggiornata la vista.
Non chiami onChange in writeValue
Importante: non invochi mai onChange all'interno di writeValue. In questo modo gli aggiornamenti programmatici verrebbero rimandati al modello e potrebbero causare cicli. onChange serve solo per le modifiche provocate dall'utente.
Tipizzazione del valore
Assegni al controllo un tipo di valore concreto (numero, stringa o interfaccia personalizzata) e tipizzi i metodi di conseguenza, per un'integrazione più sicura con i reactive form.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Risultato finora
Con writeValue e registerOnChange implementati, il controllo legge dal modello del modulo e vi scrive. Ora aggiunga la gestione degli stati disabilitato e toccato per completare l'UX.
Verifica rapida
Verifichi le Sue conoscenze sulla scrittura dei valori.
Riepilogo
Ha implementato writeValue (dal modello alla vista, gestendo null) e ha usato il callback registerOnChange per emettere le modifiche dell'utente (dalla vista al modello), ha collegato il template e ha imparato a non chiamare mai onChange da writeValue.
Domande Frequenti
La lezione «Scrivere e registrare i valori» è gratuita?
Sì — il testo completo di «Scrivere e registrare i valori» è 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 «Scrivere e registrare i valori»?
Implementare writeValue e i callback delle modifiche 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 «Scrivere e registrare i valori»?
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
- L'interfaccia ControlValueAccessor
- Scrivere e registrare i valori
- Gestire gli stati disabilitato e toccato
- Validazione nei controlli personalizzati