-[C.5. Le formulaire complet :](#c5-le-formulaire-complet-)
## C.1. Rappels
Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les formulaires principalement pour 2 utilisations :
Comme vu en cours (cf. pdf sur moodle), on peut utiliser l'API DOM avec les formulaires principalement pour 2 choses :
- détecter les changements de valeurs dans les champs de saisie et afficher des messages d'erreur si besoin
- détecter la soumission du formulaire (pour envoyer des données en AJAX par exemple)
## C.2. Préparatifs
Avant d'aller plus loin dans le TP faisons un point sur le code qui est fourni dans ce repo : il contient en effet des classes `Page` et `PageRenderer` qui correspondent à la solution de l'exercice[D. POO avancée](https://gitlab.univ-lille.fr/js/tp2/blob/master/D-poo-avancee.md)du précédent TP :
**Avant d'aller plus loin dans le TP faisons un point sur le code qui est fourni dans ce repo** : il contient en effet des classes `Page` et `PageRenderer` qui correspondent à la solution du précédent TP[D. POO avancée](https://gitlab.univ-lille.fr/js/tp2/blob/master/D-poo-avancee.md) :
- La classe `Page` est une classe de base dont hérite la classe `HomePage` et qui implémente une méthode `renderTitle()`.
- La classe `PageRenderer` est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )`. Cette méthode permet d'afficher une page (méthode `page.render()`) et son titre (méthode `page.renderTitle()`).
- La classe `PageRenderer` est une classe qui dispose d'une méthode statique `PageRenderer.renderPage( page )`. Cette méthode permet d'afficher une page avec son contenu (méthode `page.render()`) et son titre (méthode `page.renderTitle()`).
Pour permettre à chaque page de réagir aux événements de l'utilisateur, on va ajouter une méthode `mount()` dans la classe `Page` et qui sera appelée par la classe `PageRenderer` à chaque fois qu'on affiche une page via `renderPage()` :
1.**Ajouter la méthode `mount()` à la classe `Page`** :
1.**Ajouter la méthode `mount()`** dans la classe `Page` :
```js
mount(contentElement){
// par défaut, cette méthode ne fait rien
// ce sont les classes filles qui devront surcharger cette méthode
}
```
2.**Appeler la méthode `mount()` à la fin de la méthode statique `PageRenderer.renderPage()`** :
2.**Appeler la méthode `mount()`** à la fin de la méthode statique `PageRenderer.renderPage()` :
```js
staticrenderPage(page){
// ...
...
...
@@ -39,8 +39,8 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
## C.3. Le formulaire d'ajout de pizza
1.**Créez la classe `AddPizzaPage`** (dans un module `js/pages/AddPizzaPage.js`). Le titre de la page devra être "Ajouter une pizza" et la méthode `render()` sera surchargée comme suit :
@@ -50,7 +50,9 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
}
```
2.**Dans le fichier `main.js` instanciez la classe `AddPizzaPage` puis, au "click" sur le lien "Ajouter une pizza"** affichez la `AddPizzaPage` à l'aide de `PageRenderer` :
***NB :** le commentaire `/*html*/` juste avant la chaîne permet à l'extension de vscodium "es6-string-html" (que vous avez installé lors du précédent TP) d'appliquer la coloration syntaxique au code html contenu dans la template string, ce qui peut être pratique pour s'y retrouver.*
2.**Dans le fichier `main.js` instanciez la classe `AddPizzaPage`** puis, au "click" sur le lien "Ajouter une pizza" **affichez l'instance de `AddPizzaPage` à l'aide de `PageRenderer` :
```js
// addPizzaPage est une instance de la classe AddPizzaPage
PageRenderer.renderPage(addPizzaPage);
...
...
@@ -68,19 +70,18 @@ Pour permettre à chaque page de réagir aux événements de l'utilisateur, on v
***NB :** Pour rappel, la valeur du `this` à l'intérieur d'un écouteur d'événement (fonction appelée par addEventListener) est toujours l'élément HTML qui a déclenché l'événement (ici le formulaire). Pour pouvoir appeler une méthode de l'instance, il faut forcer la valeur du `this` pour qu'elle corresponde toujours à l'instance dans laquelle le code s'exécute. Comme expliqué dans le pdf du cours, il existe plusieurs manières de le faire, mais celle que je vous recommande est l'emploi de la méthode [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) dans le constructeur de la classe :*
```js
class maClasse {
class MaClasse {
constructor(){
// $FlowFixMe : pour dire à flow d'ignorer la ligne suivante
this.onClick = this.onClick.bind(this)
}
onClick(event:Event):void {
onClick(event) {
// this est correct !
}
}
```
## C.4. La validation de la saisie
1.**Au submit afficher dans la console la valeur saisie dans le champ "nom"**. Un sélecteur CSS qui peut être utile ici est le [sélecteur d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
1.**Au submit, afficher dans la console la valeur saisie par l'utilisateur dans le champ "nom"**. Un sélecteur CSS qui peut être utile ici est le [sélecteur d'attributs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
3.**Si le champ "nom" est vide, afficher un message d'erreur** à l'aide de la fonction [`alert()`](https://developer.mozilla.org/fr/docs/Web/API/Window/alert)
4.**Si le champ "nom" n'est pas vide, afficher une alerte "La pizza xxxxx a été ajoutée"** (où "xxxxx" correspond au nom qu'a saisi l'utilisateur) **et vider le champ de saisie** pour permettre à l'utilisateur de saisir une nouvelle pizza.
