Gérer les états désactivé et touché
Reflétez l’état du formulaire dans votre contrôle
Gérer les états désactivé et touché est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Au-delà de la valeur
Un contrôle personnalisé complet respecte deux autres concepts des formulaires : l’état désactivé et l’état touché. Ils pilotent l’expérience utilisateur et l’affichage de la validation.
setDisabledState
Angular appelle setDisabledState lorsque le contrôle de formulaire est désactivé ou activé (par exemple avec control.disable()). Reproduisez cet état dans votre composant.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Reproduire l’état désactivé dans la vue
Utilisez l’indicateur disabled pour mettre le contrôle en forme et bloquer les interactions, afin que les utilisateurs ne puissent pas modifier un champ désactivé.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Protéger les gestionnaires
Protégez également vos gestionnaires de modifications afin que les interactions programmatiques ou au clavier ne produisent aucun effet lorsque le contrôle est désactivé.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular fournit une fonction de rappel pour marquer le contrôle comme touché. Enregistrez-la comme vous l’avez fait pour onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}Appeler onTouched
Appelez la fonction de rappel de l’état touché lorsque l’utilisateur quitte le contrôle, généralement lors d’un événement de flou. Cela indique à Angular que l’utilisateur a interagi avec le contrôle et active les messages de validation fondés sur l’état touché.
onBlur(): void {
this.onTouched();
}Pourquoi l’état touché est important
L’expérience utilisateur liée à la validation affiche souvent les erreurs uniquement après qu’un champ a été touché. Sans appel à onTouched, control.touched reste à false et les messages d’erreur risquent de ne jamais apparaître au bon moment.
<small *ngIf="control.touched && control.invalid">Required</small>Relier le flou
Ajoutez le gestionnaire de flou dans le modèle afin que le fait de quitter le contrôle le marque comme touché.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Schéma de désactivation réactive
Privilégiez la désactivation via l’API de formulaire (control.disable()) plutôt qu’une liaison de modèle disabled, afin qu’Angular pilote setDisabledState de manière cohérente.
this.form.get('stars')?.disable();Accessibilité
Reproduisez les états désactivé et focalisé de manière accessible : définissez aria-disabled, gérez tabindex et veillez à ce que les utilisateurs du clavier puissent provoquer le flou pour déclencher l’état touché, afin que le contrôle reste inclusif.
Désormais pleinement intégré
La valeur, la désactivation et l’état touché étant tous gérés, votre contrôle se comporte comme un champ natif avec les formulaires réactifs comme avec les formulaires pilotés par le modèle. Il ne reste plus qu’à gérer la validation.
Vérification rapide
Vérifiez vos connaissances sur la désactivation et l’état touché.
Récapitulatif
Vous avez géré setDisabledState (reproduire l’état désactivé et empêcher les interactions) et registerOnTouched (l’appeler lors du flou pour marquer le contrôle comme touché et activer l’expérience utilisateur liée à la validation). Privilégiez l’API de formulaire pour piloter l’état désactivé et veillez à l’accessibilité du contrôle.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 38
- Leçons
- 144
Questions Fréquemment Posées
La leçon « Gérer les états désactivé et touché » est-elle gratuite ?
Oui — le texte complet de « Gérer les états désactivé et touché » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer les états désactivé et touché » ?
Reflétez l’état du formulaire dans votre contrôle Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Gérer les états désactivé et touché » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’interface ControlValueAccessor
- Écrire et enregistrer des valeurs
- Gérer les états désactivé et touché
- Validation des contrôles personnalisés