Discussion :

[Whisper40]

Salut !

Je suis en train de tester les steppers sous Angular avec le thème/framework Nebular, et j'aimerais générer les steppers de manière automatique, vérifier que les champs ne sont pas vide pour passer à une autre stepper par exemple.

Actuellement, les steppers sont générés de manière automatique, mais... je n'arrive pas à générer les forms/formgroup de manière automatique suivant le nombre de "questions" qui viennent dans le json...

J'ai pris les devants, voila le stackblitz : https://stackblitz.com/edit/angular-...e.component.ts

Ce que je souhaite c'est que les steppers soient générés automatiquement comme actuellement, et que l'on ne puisse pas envoyer des champs vides à la manière des Validators.required, mais de manière automatique pour leur donner un nom etc..

Merci pour l'aide

[dukoid]

histoire de savoir si j'ai bien compris !

donc à partir d'une liste qui peut varier comme par exemple celle que tu as fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
      questionsAndAnswers: [
        {
          question: "Quel service est responsable du crash du système ?",
          answer: "clamav",
          help:
            "Ce n'est pas parcequ'il n'y a pas d'erreur qu'il n'est pas responsable..."
        },
        {
          question: "A quelle heure a eut lieu le crash ? (format : HH:mm)",
          answer: "22:40",
          help: "Le problème est survenu tard dans la nuit..."
        },
        {
          question: "A quelle heure a eut lieu le crash ? (format : HH:mm)",
          answer: "22:40",
          help: "Le problème est survenu tard dans la nuit..."
        },
        {
          question: "A quelle heure a eut lieu le crash ? (format : HH:mm)",
          answer: "22:40",
          help: "Le problème est survenu tard dans la nuit..."
        }
      ],

on puisse générer pour chaque élément de la liste :
- le step
- l'affichage de la question
- la saisie de la réponse (obligatoire)
- bouton NEXT

c'est bien ça ?

[Whisper40]

Merci pour ta réponse,
Oui le step, l'affichage de la question, la saisie obligatoire, bouton next et précendent, et en fait à la fin des questions, lors du clique sur "Vérifier les réponses" je dois pouvoir vérifier que la réponse du json est égale à l'input de l'utilisateur

[krakatoa]

je vais t'indiquer la voie à suivre.
on va utiliser le principe des composants Web
on ne va pas prendre en compte le design, tu verras ça à la fin


(1) la fonctionnalité step

* un composant step qui reçoit en entrée 2 variables : index et status

- affiche le numero index (number) {{index}} + un évènement (click) sur l'index émet vers le parent (step-list) cet index
- affiche le status (true/false) {{status}}

* un composant step-list
- selectedIndex = 1; (reçoit l'index sélectionné par l'enfant)
- boucle for sur la liste
- dans la boucle, utilise le composant step en lui donnant l'index et le status

* sur la liste rajoute index et status :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
      questionsAndAnswers: [
        {
          index: 1,
          status: false,
          question: "Quel service est responsable du crash du système ?",
          answer: "clamav",
          help:
            "Ce n'est pas parcequ'il n'y a pas d'erreur qu'il n'est pas responsable..."
        },
        {
          index: 2,
          status: false,
      ...

une fois cette étape fait, je vérifie et on passe à la suite (2) formulaire dynamique

[Whisper40]

Alors la je comprends pas du tout

Le premier truc que je comprends pas c'est pourquoi on touche à cette partie html ( qui fonctionne parfaitement avec des données statiques, on peut répondre à la question, passer à la suivante, revenir,... ) ?

Après je ne comprends pas qu'est-ce que le step et le step-list pour toi ?

J'ai un stepper (nb-stepper) et un step ( le truc qui boucle nb-step)

J'ai légèrement modifié le stack, mais j'ai vraiment pas compris : https://stackblitz.com/edit/angular-...component.html

[krakatoa]

merde j'ai mal regardé je n'ai pas vu qu'il y avait stepper et nb-step et l'intention c'etait de les faires

en fait te reste plus qu'à gerer les formulaires et donc utilises les FormArray
https://www.digitalocean.com/communi...dynamic-fields