Angular - 3.15 Créer le formulaire d'édition de la liste de courses

Une liste de courses doit pouvoir évoluer. Dans cette leçon, nous ajoutons un formulaire qui permettra de modifier la liste ou d'y ajouter des articles. Il utilise la grille Bootstrap pour s'adapter à la largeur de l'écran. Pour l'instant, seule l'interface est en place, la logique viendra plus tard.

Mettre en place la structure du formulaire

Le formulaire est placé dans une ligne Bootstrap qui couvre toute la largeur, avec une colonne pleine largeur. L'élément form ne reçoit pas d'attribut action, car les données ne sont pas encore envoyées au serveur. L'envoi sera traité plus loin dans le cours.

Dans le formulaire, la colonne du nom utilise la classe col-sm-5. Elle occupe 5 colonnes sur 12 à partir de la taille sm, et toute la largeur sur les plus petits écrans. Chaque champ est enveloppé dans un élément form-group pour être structuré et stylisé.

Les champs de saisie serviront plus tard à ajouter de nouveaux articles, avec leur quantité. L'utilisateur pourra aussi modifier un article existant.

• Le label du nom affiche le texte « nom de mes articles ».
• Le champ de saisie utilise la classe form-control et l'identifiant name, relié au label.
• La colonne de la quantité est plus étroite, avec une largeur de 2.
• Le champ de quantité est de type number, avec son propre label.

Ajouter les boutons d'action

Une dernière ligne, pleine largeur, regroupe les trois boutons. Ils servent à gérer la création et l'édition des articles.

Le bouton Ajouter est vert et de type submit, car il soumettra le formulaire plus tard. Le bouton Supprimer est rouge et de type button, car il ne doit rien envoyer. Le bouton Recommencer est bleu et de type reset, pour vider le formulaire.

Plus tard, un clic sur un ingrédient le chargera dans les champs de saisie. L'utilisateur pourra alors modifier ses valeurs, ou le supprimer avec le bouton correspondant.

<button type="submit" class="btn btn-success">Ajouter</button>
<button type="button" class="btn btn-danger">Supprimer</button>
<button type="reset" class="btn btn-primary">Recommencer</button>

Vérifier le rendu dans le navigateur

Après enregistrement et actualisation, le formulaire affiche ses deux champs et ses trois boutons. Il ressemble bien à un formulaire.

Les boutons n'ont pas encore de comportement. La vidéo précise que la logique de suppression et de sélection sera ajoutée plus tard.

En résumé

Le formulaire repose sur une grille Bootstrap, avec des colonnes, des form-group et des champs form-control. Trois boutons gèrent les actions : Ajouter, Supprimer et Recommencer. La logique qui traite ces actions sera ajoutée dans une prochaine leçon.

Points clés

• Le formulaire n'a pas d'attribut action pour l'instant.
• La colonne du nom occupe 5 colonnes sur 12 à partir de la taille sm.
• La classe form-control stylise les champs de saisie.
• Ajouter est un bouton submit vert, Supprimer un bouton button rouge.
• Recommencer est un bouton reset bleu qui vide le formulaire.

Questions fréquentes

Pourquoi le formulaire n'a-t-il pas d'attribut action ?

L'envoi au serveur n'est pas encore prévu. La vidéo indique que ce point sera traité plus tard dans le cours.

Pourquoi le bouton Supprimer est-il de type button ?

Un bouton de type button n'envoie aucune donnée. Il sert seulement à lancer une action dans la page.

Quelle différence entre col-sm-5 et col-2 ?

col-sm-5 adapte la largeur de la colonne selon la taille de l'écran. col-2 lui donne une largeur de deux colonnes sur douze.