Ionic - 10.13 Modifier une offre avec un formulaire réactif
Modifier une offre demande un formulaire proche de celui de création, mais initialisé avec les valeurs existantes. Cette leçon copie le formulaire de nouvelle offre, retire les champs non modifiables, puis branche la logique dans la page. Elle corrige aussi les erreurs liées au module.
Préparer le formulaire et le module
Le formulaire copié garde le titre et la description. Le prix et les dates sont retirés, car ils ne peuvent pas être modifiés.
Les erreurs viennent du module de la page : le support des formulaires réactifs n'est pas activé. Il faut l'importer dans le module de la page pour que le FormGroup fonctionne.
Initialiser le FormGroup avec l'offre existante
La logique qui récupère l'offre à modifier existe déjà dans ngOnInit. Le FormGroup est créé après la ligne qui accède à cette offre, pour qu'il puisse utiliser ses valeurs.
La différence avec la création est la valeur de départ : au lieu d'être vide, le titre et la description reprennent les valeurs actuelles de l'offre. Les validateurs restent identiques.
Une fois la logique en place, les erreurs disparaissent. En cliquant sur modifier, le titre et la description apparaissent avec leurs valeurs.
Valider et enregistrer
Le bouton de validation est copié depuis le formulaire de création, puis la méthode associée est renommée pour mieux correspondre à la modification.
La méthode s'arrête immédiatement si le formulaire n'est pas valide. Sinon, elle affiche le résultat dans la console. Lorsque la saisie est invalide, le bouton reste grisé.
En résumé
Un formulaire de modification reprend celui de création, sans les champs non modifiables. Le FormGroup démarre avec les valeurs actuelles de l'offre, et le module des formulaires réactifs doit être activé. La validation bloque l'envoi tant que la saisie n'est pas correcte.
Points clés
- Le prix et les dates ne sont pas modifiables et sont retirés du formulaire.
- Le module des formulaires réactifs doit être activé dans le module de la page.
- Le FormGroup démarre avec le titre et la description actuels.
- La méthode de validation s'arrête si le formulaire est invalide.
- Le bouton se grise quand la saisie n'est pas valide.
Questions fréquentes
Pourquoi retirer le prix et les dates ?
La vidéo indique qu'ils ne peuvent pas être modifiés. Le formulaire de modification ne garde donc que le titre et la description.
Pourquoi les erreurs apparaissent-elles au début ?
Le module des formulaires réactifs n'était pas activé sur la page, et la logique du formulaire n'était pas encore écrite.
Où placer la création du FormGroup ?
Dans ngOnInit, après la ligne qui récupère l'offre à modifier. Ainsi, le formulaire peut utiliser les valeurs de cette offre.