Ton premier formulaire d'inscription 📝
Le but de ce challenge est de faire une page d'inscription. Si tu le fais proprement, tu pourras souvent t'en resservir (donc prends le temps de le faire bien 🙄)
- Tu vas donc créer un composant sign-up qui contiendra un formulaire d'inscription
- Tu ajouteras ce composant à ton app.component.html
- Tu penseras bien à importer tout ce dont tu as besoin
- Ce formulaire aura les champs suivants : email, firstname, lastname, password
- Tu sais maintenant que, pour chaque formulaire, on doit créer un modèle (une classe User avec chaque champ présent dans le formulaire)
- Un bouton d'inscription de type "submit"
- L'affichage du user créé dans la console au moment du click sur le bouton sauvegarde.
- firstname de type text qui doit être validé avec required, minlength à 3 et maxlength à 15
- lastname de type text qui doit être validé avec required, minlength à 3 et maxlength à 15
- email doit être validé avec required et email
- Le message d'erreur pour la validation required doit être : "Le * est requis"
- Avec * = le nom du champ.
- Par exemple : Le prénom est requis
- Le message pour la validation de l'email doit être : L'email est invalide
- Le message pour la validation de maxlength doit être : Le * ne doit pas dépasser 15 caractères.
- Le message pour la validation de minlength doit être : Le * doit comporter au moins 3 caractères.
- Les messages d'erreurs doivent être affichés uniquement après l'envoi du formulaire 😈
Fais-moi naviguer ⛵️
Pour réaliser ce challenge, repars de l'app Angular que tu as créée dans la précédente quête.
Le but de ce challenge est d'afficher un menu pour naviguer entre le composant et le composant
- Créer un composant qui contiendra deux liens : un vers /signup et l'autre vers /user
- Créer le routeur avec 3 routes, une sur signup, une sur user et une par défaut qui affiche le composant
- Le composant ne doit contenir que le composant et la directive
- Poste le lien vers ton repository en guise de solution.
- Le router est implémenté avec la méthode manuelle que tu as étudiée dans cette quête
- Le composant menu est dans le composant App
- Les composants et ne sont plus dans le composant
- La directive RouterOutlet est utilisée dans le composant
- Le module RouterModule est correctement configuré pour afficher le composant lorsqu'on navigue vers /sign-up
- Le module RouterModule est correctement configuré pour afficher le composant lorsqu'on navigue vers /user
- Le module RouterModule est correctement configuré pour afficher le composant lorsqu'on navigue vers /
- La navigation entre les composants et est fonctionnelle
Le coup classique ! Tu réaliseras ce challenge directement dans Codesandbox template angular Clique sur fork pour générer un lien associé à ton travail. Colle l'url de ton fork pour valider la quête.
Tu peux aussi créer une application Angular via ton terminal et poster le lien Github.
- Ajoute un titre "Bonjour !"
- Crée deux boutons en HTML : "View" et "Edit" (inutile de leur faire faire quoi que ce soit)
- Déclare une propriété boolean isAdmin dans ton component (false ou true).
- Utilise une structural directive pour afficher "Edit" uniquement si isAdmin est à true.
- Utilise NgClass ou NgStyle pour afficher le titre en rouge quand isAdmin est à true.
BONUS : Créer un bouton qui permet, au clic, de changer la valeur de isAdmin.
- Quand tu changes la valeur de isAdmin: false → true (ou true → false) dans ton code, le rendu doit être différent et correspondre aux points ci-dessus.
Pour réaliser ce challenge, repars de l'app Angular que tu as créé dans la précédente quête.
Tu vas devoir créer un nouveau composant user-profile, puis l'afficher dans le navigateur.
Ce composant contiendra un objet user :
user = {
name : 'Doe',
firstName : 'John',
age : 25,
quote : '',
photo : 'https://randomuser.me/api/portraits/lego/2.jpg'
};
Tu devras afficher sous la forme d'une fiche de contact, l'ensemble de ces informations en utilisant l'interpolation et le binding :
- La photo de l'utilisateur
- Un champ input pour éditer la citation (quote)
- L'âge
- Le nom et le prénom
- Un bouton pour masquer l'âge. Pense à la propriété hidden redéfinie par Angular. N'hésite pas à fouiller sur internet 🤓 (en anglais naturellement, tu y trouveras toujours beaucoup plus de réponses précises et pertinentes).
- Le composant user-profile est appelé dans app.component.html
- À la saisie dans le champ input la citation change
- Au clic sur le bouton, l'âge disparaît
- Poste ta solution avec le lien Github où ton projet Angular est hébergé
→ Pour réaliser ce challenge, crée un nouveau projet Angular sur ta machine et reprend le code de ce projet angular. Tu peux aussi forker la sandbox sur ton compte. L’objectif de ce challenge va être d’obtenir ce résultat dans le navigateur :
- Le CSS du BlockComponent est valide, inutile de le toucher
- L'HTML du BlockComponent est presque complet
- Tu dois appeler le BlockComponent dans ton AppComponent
- Tu dois ajouter du CSS pour positionner les BlockComponents
- Prends garde avec les déclarations du AppModule ; pour l’instant, il manque quelque chose
- La chaine de caractères “A B C” ne doit être présente qu’une seule fois dans tout ton code
- L’image doit correspondre globalement au screenshot ci-dessus
- Poste l’url vers ton projet hébergé sur Github ou de ta sandbox