L'interfaccia ControlValueAccessor
Collegare un widget personalizzato ai form di Angular
L'interfaccia ControlValueAccessor è 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é usare controlli personalizzati
I form Angular funzionano immediatamente con gli input nativi. Per rendere il proprio componente (un widget di valutazione, un selettore di colori o un interruttore) utilizzabile con ngModel e formControlName, è necessario implementare ControlValueAccessor.
Il collegamento
ControlValueAccessor (CVA) è il collegamento tra il modello del form di Angular e la vista del componente. Definisce il modo in cui il modello scrive i valori nel componente e come le modifiche dell'utente vengono restituite.
L'interfaccia
CVA richiede quattro metodi: writeValue, registerOnChange, registerOnTouched e l'implementazione facoltativa di setDisabledState.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Registrare il provider
Indichi ad Angular che il componente è un value accessor fornendo NG_VALUE_ACCESSOR con multi: true e useExisting che punti al componente.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Perché forwardRef
forwardRef è necessario perché la classe fa riferimento a se stessa nei propri metadati prima che venga definita. Rimanda la risoluzione a quando la classe sarà disponibile.
Struttura del componente
Un controllo personalizzato dichiara il provider e implementa i metodi dell'interfaccia. La classe conserva internamente il valore corrente.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Usarlo come un controllo nativo
Una volta implementato CVA, il componente si integra nei form basati su template e nei form reattivi esattamente come un input nativo.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Due direzioni dei dati
Il flusso dal modello alla vista passa attraverso writeValue (Angular invia il valore del form al componente). Il flusso dalla vista al modello passa attraverso il callback registrato in registerOnChange (il componente invia le modifiche dell'utente al modello).
Tracciare lo stato touched
L'esperienza utente della validazione dipende dallo stato touched. Informi Angular tramite il callback di registerOnTouched, in genere durante il blur.
Stato disabilitato
Quando il form disabilita il controllo (control.disable()), Angular chiama setDisabledState, così il componente può riflettere visivamente lo stato e ignorare l'input.
Percorso
Nelle lezioni successive verranno implementati i singoli elementi: scrittura e registrazione dei valori, gestione degli stati disabilitato e touched e aggiunta della validazione. Insieme, questi elementi rendono il controllo personalizzato completamente integrato.
Verifica rapida
Verifichi le Sue conoscenze di base su CVA.
Riepilogo
Ha imparato che ControlValueAccessor collega i componenti personalizzati ai form Angular tramite quattro metodi, registrati con NG_VALUE_ACCESSOR, forwardRef e multi: true. Ora implementerà la scrittura e la registrazione dei valori.
Domande Frequenti
La lezione «L'interfaccia ControlValueAccessor» è gratuita?
Sì — il testo completo di «L'interfaccia ControlValueAccessor» è 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 «L'interfaccia ControlValueAccessor»?
Collegare un widget personalizzato ai form di Angular 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 «L'interfaccia ControlValueAccessor»?
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