Exercice 1 : Mise en œuvre des formulaires réactifs
Objectif : Créez un formulaire pour capturer les informations d’un utilisateur avec les champs
: nom, prénom, et email. Ajoutez des validations sur ces champs :
• Nom : Doit être requis et ne doit pas être vide.
• Prénom : Doit être requis et ne doit pas être vide.
• Email : Doit être requis et doit correspondre à un format email valide.
Instructions :
1. Créez un composant Angular pour le formulaire.
2. Utilisez FormControl pour chaque champ du formulaire :
o Définir les valeurs par défaut et ajouter les validations nécessaires.
3. Utilisez FormGroup pour grouper les FormControl.
4. Liez le modèle de formulaire au template via [formGroup].
5. Ajoutez des messages d’erreur pour chaque champ indiquant clairement pourquoi
les champs sont invalides.
6. Testez le comportement du formulaire en vérifiant que les validations fonctionnent
correctement.
Exercice 2 : Mise en œuvre des formulaires basés sur le modèle
Objectif : Créez un formulaire pour capturer les informations d’un utilisateur avec les champs
: adresse et numéro de téléphone. Ajoutez des validations sur ces champs :
• Adresse : Doit être requis et ne doit pas être vide.
• Numéro de téléphone : Doit être requis, doit être un numéro valide (ex : format +33
6 12 34 56 78), et ne doit pas dépasser 15 caractères.
Instructions :
1. Créez un composant Angular pour le formulaire.
2. Utilisez [(ngModel)] pour lier les champs du formulaire avec les propriétés du
composant.
3. Appliquez les validations nécessaires dans le template HTML :
o required pour la présence.
o pattern pour vérifier la conformité à un format de numéro de téléphone
valide.
4. Ajoutez des messages d’erreur en utilisant les directives conditionnelles dans le
template pour informer l’utilisateur des erreurs de validation.
5. Testez le comportement du formulaire en vérifiant que les messages d’erreur
apparaissent correctement lorsque les champs sont invalides.
Exercice 3 : Création d'un Composant Personnalisé avec ControlValueAccessor
Contexte :
Vous devez développer un composant Angular personnalisé qui agit comme un slider
(curseur) pour sélectionner une valeur numérique entre 0 et 100. Ce composant doit être
utilisable dans des formulaires réactifs et doit s'intégrer parfaitement grâce à l'utilisation de
l'interface ControlValueAccessor.
Instructions :
1. Créer le composant :
o Nommez le composant CustomSlider.
o Utilisez Angular CLI pour générer le composant.
2. Implémenter le slider :
o Le composant doit afficher un curseur horizontal (<input type="range">).
o L'utilisateur peut déplacer le curseur pour sélectionner une valeur.
o La valeur sélectionnée doit être affichée dynamiquement à côté du curseur.
3. Gérer les interactions utilisateur :
o Lorsqu'un utilisateur déplace le curseur, la valeur doit être mise à jour dans le
composant et synchronisée avec le formulaire parent.
o Implémentez les méthodes de ControlValueAccessor pour connecter votre
composant au système de formulaires Angular.
4. Tester l'intégration dans un formulaire réactif :
o Créez un formulaire dans le composant parent qui utilise le CustomSlider
pour sélectionner une valeur entre 0 et 100.
o Affichez la valeur du formulaire dans le modèle parent.
5. Bonus (optionnel) :
o Ajoutez une entrée (@Input) pour permettre la configuration des limites
minimum et maximum du slider.
o Ajoutez une option pour afficher les graduations (ticks) sur le slider.
Contraintes :
• Le composant doit être totalement réutilisable.
• N'utilisez pas de bibliothèque externe pour le slider.
• Respectez une structure de code propre et bien organisée.
Objectifs :
Cet exercice vous permet de :
• Comprendre et mettre en œuvre ControlValueAccessor.
• Créer des composants personnalisés pour des besoins spécifiques.
• Intégrer ces composants dans un système de formulaires réactifs.