Gestire gli stati disabilitato e toccato
Riflettere lo stato del form nel proprio controllo
Gestire gli stati disabilitato e toccato è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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 il valore
Un controllo personalizzato completo rispetta altri due concetti dei moduli: lo stato disabilitato e lo stato toccato. Questi stati determinano l'UX e la visualizzazione della validazione.
setDisabledState
Angular chiama setDisabledState quando il controllo del modulo viene disabilitato o abilitato (ad esempio tramite control.disable()). Rifletta questo stato nel componente.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Riflettere lo stato disabilitato nella vista
Usi il flag disabled per applicare lo stile al controllo e bloccare l'interazione, così gli utenti non possono modificare un campo disabilitato.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Proteggere gli handler
Protegga inoltre gli handler delle modifiche, in modo che le interazioni programmatiche o da tastiera non abbiano effetto quando il controllo è disabilitato.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular passa un callback per contrassegnare il controllo come toccato. Lo salvi, proprio come ha salvato onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}Chiamare onTouched
Richiami il callback per lo stato toccato quando l'utente lascia il controllo, in genere durante il blur. In questo modo Angular sa che l'utente ha interagito con il controllo e può attivare i messaggi di validazione basati sullo stato toccato.
onBlur(): void {
this.onTouched();
}Perché lo stato toccato è importante
L'UX della validazione spesso mostra gli errori solo dopo che un campo è stato toccato. Se non chiama onTouched, control.touched rimane false e i messaggi di errore potrebbero non comparire al momento giusto.
<small *ngIf="control.touched && control.invalid">Required</small>Collegare il blur
Colleghi l'handler del blur nel template, così quando l'utente lascia il controllo questo viene contrassegnato come toccato.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Pattern per la disabilitazione reattiva
Preferisca disabilitare il controllo tramite l'API del modulo (control.disable()) anziché tramite un binding disabled nel template, così Angular gestisce setDisabledState in modo coerente.
this.form.get('stars')?.disable();Accessibilità
Rifletta gli stati disabilitato e di focus in modo accessibile: imposti aria-disabled, gestisca tabindex e si assicuri che gli utenti da tastiera possano uscire dal controllo tramite blur per attivare lo stato toccato, mantenendo il controllo inclusivo.
Ora completamente integrato
Con la gestione di valore, stato disabilitato e stato toccato, il controllo si comporta come un input nativo sia nei reactive form sia nei template-driven form. L'ultimo elemento da aggiungere è la validazione.
Verifica rapida
Verifichi le Sue conoscenze sugli stati disabilitato e toccato.
Riepilogo
Ha gestito setDisabledState (riflettendo lo stato disabilitato e impedendo l'interazione) e registerOnTouched (chiamandolo durante il blur per contrassegnare il controllo come toccato e attivare l'UX della validazione). Preferisca usare l'API del modulo per gestire lo stato disabilitato e mantenga il controllo accessibile.
Domande Frequenti
La lezione «Gestire gli stati disabilitato e toccato» è gratuita?
Sì — il testo completo di «Gestire gli stati disabilitato e toccato» è 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 «Gestire gli stati disabilitato e toccato»?
Riflettere lo stato del form nel proprio controllo 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 3 di 4.
Quanto tempo richiede la lezione «Gestire gli stati disabilitato e toccato»?
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