Calcul avec saisies utilisateur Angular ReactivForm multi step

Version imprimable

Bonjour,

Je ne suis pas un Expert en dev. Je découvre Angular 9 par un petit projet personnel et suis bloqué depuis 2 jours sur les Formulaires ReactivForm multistep.

Je désire récupérer les saisies utilisateur des deux premiers steps, faire des calculs et afficher le résultat dans le dernier step du formulaire. Je cherche partout la solution mais je n'y arrive pas. Impossible de retourner le résultat des calculs... J'arrive à voir dans la console les saisies mais comment les utiliser? Je bloque totalement sur cette étape.

Mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<div class="container container-fluid">
    <form [formGroup]="regForm" id="regForm" action="">
 
        <div class="row">
            <div class="col-sm-12">
                <div class="text-center text-responsive blue-text pt-5">
                    <h4 class="blue-text">{{ title }}</h4>
                </div>
                <div class="separator_auto"></div><div class="pb-3"></div>
            </div>
        </div>
 
        <div style="text-align:center;margin-top:10px; margin-bottom:10px;">
            <span class="step"></span>
            <span class="step"></span>
            <span class="step"></span>
            <span class="step"></span>
        </div> 
        <!-- One "tab" for each step in the form: -->  
        <div class='row d-flex justify-content-center py-5 px-3 blue-grey lighten-5 border'>
            <div class='col-xs-offset-1 col-xs-10 col-sm-offset-2 card col-sm-8 py-2 white'>
                <div class="row tab py-3">
                    <div class="col">
                        <div class=row>
                            <div class='col-xs-12 col-sm-6'>
                                <label class="control-label" for="puissance">Puissance</label>
                                <div class="form-group input-group-prepend">
                                    <span class="input-group-addon">
                                        <i class="fas fa-sun fa-x p-3 blue-grey lighten-5"></i>
                                    </span>
                                    <select class="form-control-lg input-md" type="text" formControlName="puissance">
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">12+</option>
                                    </select> 
                                </div>
                            </div>                 
                            <div class='col-xs-12 col-sm-6'>
                                <label class="control-label" for="energie">Energie</label>
                                <div class="form-group input-group-prepend">                             
                                    <span class="input-group-addon">
                                        <i class="fas fa-gas-pump fa-x p-3 blue-grey lighten-5" aria-hidden="true"></i>
                                    </span>
                                    <select class="form-control-lg" type="text" required formControlName="energie">
                                        <option value="E">Essence</option>
                                        <option value="D">Diesel</option>
                                        </select>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row tab p-3">
                    <div class="col">
                        <div class="row d-flex justify-content-center">
                            <div class='col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8'>
                                <label class="control-label" for="activité">Activité professionnelle</label>
                                <div class="form-group input-group-prepend d-flex justify-content-center">                            
                                    <span class="input-group-addon">
                                        <i class="fas fa-briefcase fa-x p-3 blue-grey lighten-5" aria-hidden="true"></i>
                                    </span>
                                    <select class="form-control-lg" type="text" formControlName="work">
                                        <option value="0.05">Activité non commerciale</option>
                                        <option value="0">Activité commerciale</option>
                                        <option value="0.10">Sans emplois</option>
                                    </select>  
                                </div>
                            </div>
                        </div>                 
                    </div>
                </div>
 
                <!----------------------LES OFFRES----------------------------------------------------------->
                <div class="row tab p-3">
                    <div class="col">                      
                        <div class="row d-flex justify-content-center">
                            <!----------Offre 1 -------------------------------------------------->
                            <div class="col-lg-6 col-md-offset-2 col-md-8 col-sm-12">
                                <div class="outer-div">
                                    <div class="inner-div">
                                        <div class="front">
                                            <div class="fronttop p-top-30 text-center text-uppercase">{{ offer1 }}</div>
                                            <div class="frontprice deep-purple darken-4 color-block">
                                                <div class="price text-center pt-4">
                                                    <h4 class="text-white">{{ rc }}</h4>
                                                    <p class="text-white">Euro</p>
                                                </div>
                                            </div>
                                            <div class="pricing_body">                                    
                                                <ul>
                                                    <li><i class="fa fa-check-circle text-primary"></i> <span> Control de base</span></li>
                                                    <li><i class="fa fa-check-circle text-primary"></i> Lavage</li>
                                                    <li><i></i></li>
                                                    <li><i></i></li>
                                                </ul>
                                                <div class="text-center m-top-30">
                                                    <a href="" class="btn btn-primary">Je valide</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!----------Offre 2 ------------------------------------------------------------>
                            <div class="col-lg-6 col-md-offset-2 col-md-8 col-sm-12">
                                <div class="outer-div">
                                    <div class="inner-div">
                                        <div class="front">
                                            <div class="fronttop p-top-30 text-center text-uppercase">{{ offer2 }}</div>
                                            <div class="frontprice deep-purple darken-4 color-block">
                                                <div class="price text-center pt-4">
                                                    <h4 class="text-white">{{ price }}</h4>
                                                    <p class="text-white">Euro</p>
                                                </div>
                                            </div>
                                            <div class="pricing_body">                                                                            
                                                <ul>
                                                    <li><i class="fa fa-check-circle text-primary"></i> <span> Control de base</span></li>
                                                    <li><i class="fa fa-check-circle text-primary"></i> Lavage</li>
                                                    <li><i class="fa fa-check-circle text-primary"></i> prime client</li>
                                                </ul>
                                                <div class="text-center m-top-30">
                                                    <a href="" class="btn btn-primary">Je valide</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>                                           
                        </div>
                    </div>
                </div>
                <div>
                    <div class="row py-3">
                        <div class="col d-flex justify-content-center">
                            <button class="btn btn-outline-rounded btn-primary" type="button" id="prevBtn" onclick="nextPrev(-1)">Retour</button>
                        </div>
                        <div class="col d-flex justify-content-center">
                            <button class="btn btn-outline-rounded btn-primary" type="button" id="nextBtn" onclick="nextPrev(1)">Suivant</button>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </form>
    </div>

J'utilise trois fichier .ts. Le premier contenant le composant et le secon un service.
Le composant Carbase:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import {  Component, Input, OnInit } from '@angular/core';
import { Router }              from '@angular/router';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
import { carbase }            from '../../../models/carformdata.model';
import { carformdataService }     from '../../../services/carformdata.service';
import { cardataService }     from '../../../services/cardata.service';
 
 
@Component({
  selector: 'bi-carbase',
  templateUrl: './carbase.component.html',
  styleUrls: ['./carbase.component.scss']
})
 
export class CarbaseComponent implements OnInit {
 
    @Input() carformdata;
 
    title = "Mon forfait auto";
 
    regForm: FormGroup;
    formcar: any;
    rc: any;
    i: any;
    c: any;
    carbase: carbase;
 
    rcpes: any[];
    rcpdi: any[];
constructor( private router: Router,
              private carformdataService: carformdataService, //injection service form
              private cardataService: cardataService,
              private formBuilder: FormBuilder) {
 
 
              }
  ngOnInit() {
      this.loadScript();
      this.rcpes = this.cardataService.rc_pes;
      this.rcpdi = this.cardataService.rc_pdi;
 
      this.regForm = new FormGroup({
        puissance:  new FormControl(''),
        energie:    new FormControl(''),
        work:       new FormControl('')
      });
 
rc = this.carformdataService.gr_rc(this.puissance, this.energie, this.work);
 
};
 
};

LE service Cardata: qui contient les données de calcul qui ne sont pas saisies

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export class cardataService {
//---Gestion des taux
 
bns = 0.85;
dr = 0.07; 
rcom = 0.15 // Reduction commerciale
 
 
//----particuliers---------------------------------
// Essence
rc_pes = [
        {
            puissance: 5,
            value: 66885
        },
        {
            puissance: 6,
            value: 66885
        },       
        {
            puissance: 7,
            value: 73415
        },       
        {
            puissance: 8,
            value: 73415
        },       
        {
            puissance: 9,
            value: 73415
        },
        {
            puissance: 10,
            value: 114693
        },       
        {
            puissance: 11,
            value: 114693
        },       
        {
            puissance: 12,
            value: 114693
        },
        {
            puissance: 13,
            value: 129058
        },
      ];}

Le service carformdata: qui contient la logique de calcul

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
import { Injectable }                        from '@angular/core';
import { cardataService }                    from './cardata.service';
 
 
@Injectable()
 
export class carformdataService {
 
    i: any;
    y: any;
    c: any;
    rc: any;
    puissance: any;
    energie: any;
    work: any;
 
    constructor(private cardataService: cardataService) { 
    }
 
 
 
gr_rc(puissance, energie, work) {
 
  if (energie == "E") {
      for (this.i = 0; this.i < this.cardataService.rc_pes.length; this.i++) {
          console.log(this.cardataService.rc_pes[this.i].puissance);
 
          if (this.cardataService.rc_pes[this.i].puissance = puissance) {
 
              this.rc = (this.cardataService.bns - work)*this.cardataService.rc_pes[this.i].value;
          }
      }
  }
  return this.rc;
}
 
}

Mon but est de récupérer les saisies utilisateur des 2 premiers steps, de lire le service de données et de retourner le resultat du calcul rc que je souhaiterais voir afficher au dernier step du formulaire.

Je dois certainement me tromper dans ma logique mais je ne trouve pas le souci.

Pourriez vous me donner un coup de main s'il vous plait?

Best Regards

14/07/2020, 12h18
krakatoa

qu'affiche le console log ?
il y a bien les données des 3 formulaires ?
14/07/2020, 16h21
ricobye

Bonjour Krakatoa

La console log affiche bien toutes les saisies. Mais impossible de les capter pour faire les calculs
14/07/2020, 18h05
krakatoa

justement si tu me donne ce qu'il te retourne je pourrais te dire comment faire

Ce code ne marche pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
if (energie == "E") {
      for (this.i = 0; this.i < this.cardataService.rc_pes.length; this.i++) {
          console.log(this.cardataService.rc_pes[this.i].puissance);
 
          if (this.cardataService.rc_pes[this.i].puissance = puissance) {
 
              this.rc = (this.cardataService.bns - work)*this.cardataService.rc_pes[this.i].value;
          }
      }
  }
  return this.rc;
}

Mais en utilisant la fonction valueChange, je vois les saisies.

Je mets ce code pour faire mes tests et je vois bien mes saisies:

Code:

1
2
3
4
5
6
7
8
9
10
      this.regForm.get("puissance").valueChanges.subscribe(selectedValue => {
        this.puissance = selectedValue;
        console.log(this.puissance)
      })
 
 
      this.regForm.get("energie").valueChanges.subscribe(selectedValue => {
        this.energie = selectedValue;
        console.log(this.energie)
      })

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
if (energie == "E") {
      for (this.i = 0; this.i < this.cardataService.rc_pes.length; this.i++) {
          console.log(this.cardataService.rc_pes[this.i].puissance);
 
          if (this.cardataService.rc_pes[this.i].puissance = puissance) {
 
              this.rc = (this.cardataService.bns - work)*this.cardataService.rc_pes[this.i].value;
          }
      }
  }
  return this.rc;
}

energie et puissance sont recuperé comment ?

est ce qu'on peut avoir le code en entier ?

15/07/2020, 11h01
ricobye

Bonjour dukoid,
J'ai mis le code du service à jour.

Merci
15/07/2020, 11h17
dukoid

donne moi le code en entier parceque là ce n'est pas possible....

il y a une importance dans la chronologie et donc je dois voir l'ensemble

Ok dukoid, je reprends tout:

J'ai mon template qui est un formulaire multistep. L'utilisateur saisi des informations

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<div class="container container-fluid">
    <form [formGroup]="regForm" id="regForm" action="">
 
        <div class="row">
            <div class="col-sm-12">
                <div class="text-center text-responsive blue-text pt-5">
                    <h4 class="blue-text">{{ title }}</h4>
                </div>
                <div class="separator_auto"></div><div class="pb-3"></div>
            </div>
        </div>
 
        <div style="text-align:center;margin-top:10px; margin-bottom:10px;">
            <span class="step"></span>
            <span class="step"></span>
            <span class="step"></span>
            <span class="step"></span>
        </div> 
        <!-- One "tab" for each step in the form: -->  
        <div class='row d-flex justify-content-center py-5 px-3 blue-grey lighten-5 border'>
            <div class='col-xs-offset-1 col-xs-10 col-sm-offset-2 card col-sm-8 py-2 white'>
                <div class="row tab py-3">
                    <div class="col">
                        <div class=row>
                            <div class='col-xs-12 col-sm-6'>
                                <label class="control-label" for="puissance">Puissance</label>
                                <div class="form-group input-group-prepend">
                                    <span class="input-group-addon">
                                        <i class="fas fa-sun fa-x p-3 blue-grey lighten-5"></i>
                                    </span>
                                    <select class="form-control-lg input-md" type="text" formControlName="puissance">
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">12+</option>
                                    </select> 
                                </div>
                            </div>                 
                            <div class='col-xs-12 col-sm-6'>
                                <label class="control-label" for="energie">Energie</label>
                                <div class="form-group input-group-prepend">                             
                                    <span class="input-group-addon">
                                        <i class="fas fa-gas-pump fa-x p-3 blue-grey lighten-5" aria-hidden="true"></i>
                                    </span>
                                    <select class="form-control-lg" type="text" required formControlName="energie">
                                        <option value="E">Essence</option>
                                        <option value="D">Diesel</option>
                                        </select>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row tab p-3">
                    <div class="col">
                        <div class="row d-flex justify-content-center">
                            <div class='col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8'>
                                <label class="control-label" for="activité">Activité professionnelle</label>
                                <div class="form-group input-group-prepend d-flex justify-content-center">                            
                                    <span class="input-group-addon">
                                        <i class="fas fa-briefcase fa-x p-3 blue-grey lighten-5" aria-hidden="true"></i>
                                    </span>
                                    <select class="form-control-lg" type="text" formControlName="work">
                                        <option value="0.05">Activité non commerciale</option>
                                        <option value="0">Activité commerciale</option>
                                        <option value="0.10">Sans emplois</option>
                                    </select>  
                                </div>
                            </div>
                        </div>                 
                    </div>
                </div>
 
                <!----------------------LES OFFRES----------------------------------------------------------->
                <div class="row tab p-3">
                    <div class="col">                      
                        <div class="row d-flex justify-content-center">
                            <!----------Offre 1 -------------------------------------------------->
                            <div class="col-lg-6 col-md-offset-2 col-md-8 col-sm-12">
                                <div class="outer-div">
                                    <div class="inner-div">
                                        <div class="front">
                                            <div class="fronttop p-top-30 text-center text-uppercase">{{ offer1 }}</div>
                                            <div class="frontprice deep-purple darken-4 color-block">
                                                <div class="price text-center pt-4">
                                                    <h4 class="text-white">{{ rc }}</h4>
                                                    <p class="text-white">Euro</p>
                                                </div>
                                            </div>
                                            <div class="pricing_body">                                    
                                                <ul>
                                                    <li><i class="fa fa-check-circle text-primary"></i> <span> Control de base</span></li>
                                                    <li><i class="fa fa-check-circle text-primary"></i> Lavage</li>
                                                    <li><i></i></li>
                                                    <li><i></i></li>
                                                </ul>
                                                <div class="text-center m-top-30">
                                                    <a href="" class="btn btn-primary">Je valide</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!----------Offre 2 ------------------------------------------------------------>
                            <div class="col-lg-6 col-md-offset-2 col-md-8 col-sm-12">
                                <div class="outer-div">
                                    <div class="inner-div">
                                        <div class="front">
                                            <div class="fronttop p-top-30 text-center text-uppercase">{{ offer2 }}</div>
                                            <div class="frontprice deep-purple darken-4 color-block">
                                                <div class="price text-center pt-4">
                                                    <h4 class="text-white">{{ rc }}</h4>
                                                    <p class="text-white">Euro</p>
                                                </div>
                                            </div>
                                            <div class="pricing_body">                                                                            
                                                <ul>
                                                    <li><i class="fa fa-check-circle text-primary"></i> <span> Control de base</span></li>
                                                    <li><i class="fa fa-check-circle text-primary"></i> Lavage</li>
                                                    <li><i class="fa fa-check-circle text-primary"></i> prime client</li>
                                                </ul>
                                                <div class="text-center m-top-30">
                                                    <a href="" class="btn btn-primary">Je valide</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>                                           
                        </div>
                    </div>
                </div>
                <div>
                    <div class="row py-3">
                        <div class="col d-flex justify-content-center">
                            <button class="btn btn-outline-rounded btn-primary" type="button" id="prevBtn" onclick="nextPrev(-1)">Retour</button>
                        </div>
                        <div class="col d-flex justify-content-center">
                            <button class="btn btn-outline-rounded btn-primary" type="button" id="nextBtn" onclick="nextPrev(1)">Suivant</button>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </form>
    </div>

J'ai mon carbase component qui va faire appel à deux services:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
import {  Component, Input, OnInit } from '@angular/core';
import { Router }              from '@angular/router';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 
import { carformdataService }     from '../../../services/carformdata.service';
import { cardataService }     from '../../../services/cardata.service';
 
 
@Component({
  selector: 'bi-carbase',
  templateUrl: './carbase.component.html',
  styleUrls: ['./carbase.component.scss']
})
 
export class CarbaseComponent implements OnInit {
 
    @Input() carformdata;
 
    title = "Mon forfait auto";
 
    regForm: FormGroup;
    rc: any;
    i: any;
    c: any;
 
    puissance: any; 
    energie: any;   
    work: any; 
 
    rcpes: any[];
    rcpdi: any[];
 
constructor( private router: Router,
              private carformdataService: carformdataService, //injection service form
              private cardataService: cardataService,
              private formBuilder: FormBuilder) {
 
 
              }
  ngOnInit() {
 
      this.rcpes = this.cardataService.rc_pes;
 //     this.rcpdi = this.cardataService.rc_pdi;
 
      this.regForm = new FormGroup({
        puissance:  new FormControl(''),
        energie:    new FormControl(''),
        work:       new FormControl('')
 
      });
 
//======rajouté pour test====================
      this.regForm.get("puissance").valueChanges.subscribe(selectedValue => {
        this.puissance = selectedValue;
        console.log(this.puissance)
      })
 
      this.regForm.get("energie").valueChanges.subscribe(selectedValue => {
        this.energie = selectedValue;
        console.log(this.energie)
      })
 
      this.regForm.get("work").valueChanges.subscribe(selectedValue => {
        this.work = selectedValue;
        console.log(this.work)
      })
 
//=================================================
 
 
rc = this.carformdataService.gr_rc(this.puissance, this.energie, this.work);
 
};
 
 
};

LEs services appelés sont de deux types.

Celui contenant les données pour les calculs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
export class cardataService {
//---Gestion des taux
 
bns = 0.85;
dr = 0.07; 
rcom = 0.15 // Reduction commerciale
 
 
//----particuliers---------------------------------
// Essence
rc_pes = [
        {
            puissance: 5,
            value: 66885
        },
        {
            puissance: 6,
            value: 66885
        },       
        {
            puissance: 7,
            value: 73415
        },       
        {
            puissance: 8,
            value: 73415
        },       
        {
            puissance: 9,
            value: 73415
        },
        {
            puissance: 10,
            value: 114693
        },       
        {
            puissance: 11,
            value: 114693
        },       
        {
            puissance: 12,
            value: 114693
        },
        {
            puissance: 13,
            value: 129058
        },
      ];}

Et celui contenant la fonction de calcul

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
import { Injectable }                        from '@angular/core';
import { cardataService }                    from './cardata.service';
 
 
@Injectable()
 
export class carformdataService {
 
 
    i: any;
    y: any;
    c: any;
    rc: any;
 
    constructor(private cardataService: cardataService) { 
    }
 
gr_rc(puissance, energie, work) {
 
    if (energie == "E") {
        for (this.i = 0; this.i < this.cardataService.rc_pes.length; this.i++) {
            console.log(this.cardataService.rc_pes[this.i].puissance);
 
            if (this.cardataService.rc_pes[this.i].puissance = puissance) {
 
                this.rc = ((this.cardataService.bns - work)*this.cardataService.rc_pes[this.i].value;
            }
        }
    }
    return this.rc;
}

Le script qui permet de gérer la navigation dans les tab du formulaire est:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
 
function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("prevBtn").style.display = "none";
    document.getElementById("nextBtn").style.display = "none";
//    document.getElementById("nextBtn").innerHTML = "Valider";
  } else {
    document.getElementById("nextBtn").innerHTML = "Suivant";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}
 
function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}
 
 
function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  z = x[currentTab].getElementsByTagName("select");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
    if (y[i].type == "number" && y[i].value < 7) {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
 
  }
  // A loop that checks every select field in the current tab:
  for (i = 0; i < z.length; i++) {
    // If a field is empty...
    if (z[i].value == "") {
      // add an "invalid" class to the field:
      z[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}
 
function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

Je pense que là nous avons tout le code.
Je voudrais afficher rc dans le dernier onglet du formulaire. Le but est de faire une offre à partir des données saisies par l'utilisateur. Je récupère la puissance, l'energie et l'activité professionnelle. Je les utilise pour faire le calcul et lorsqu'il arrive au dernier onglet j'affiche l'offre...

Je pensais que se serait si simple mais hélas...

Merci d'avance pour l'aide

c'est simple mais il faut connaitre de façon global une technologie c'est ce qu'on appelle l’expérience :)
il suffit que tu n'a pas connaissance d'une possibilité et tu vas chercher des trucs de ouf pour résoudre un problème alors que c'est si simple !

Code:

1
2
3
4
5
6
7
8
9
10
11
 
ngOnInit() {
    this.regForm.valueChanges.subscribe((data: any) => {              // à chaque modification sur n'importe quel champ du formulaire
        console.log(data);
 
       if (data.energie !== "" && data.puissance !== "" && data.work !=="")  {    // il faut que tous les champs soient rempli pour lancer les calculs
 
             // lancer les calculs et mise a jour du résultat à l'écran
       }
    });    
}

*** ou avec un système de validation.. par ex: required sur tous les champs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
import {Validators, FormBuilder, FormGroup} from '@angular/forms';
...
  regForm: FormGroup;
...
ngOnInit() {
    this.regForm= this.formBuilder.group({
      energie: ['', [Validators.required, ]],
      puissance: ['', [Validators.required, ]],
      work: ['', [Validators.required, ]],
    });
 
    this.regForm.valueChanges.subscribe((data: any) => {              // à chaque modification sur n'importe quel champ du formulaire
        console.log(data);
 
       if (this.regForm.valid)  {    // il faut que tous les champs passe la validation pour lancer les calculs
 
             // lancer les calculs (data.energie...) et mise a jour du résultat à l'écran
       }
    });    
}

*** autre point:
dans ton code... du javascript.

Code:

1
2
 
document.getElementById("prevBtn").style.display = "none";

il existe une façon plus adapté Angular pour faire se genre de chose, modifier le css ou la structure.. mais bon, là encore cela demande une connaissance du framework

15/07/2020, 22h58
ricobye

MErci merci merci dukoid. Vous me sauvez la vie. Ca marche comme je veux. Je pourrai enfin avancer Youpiiii. Vous êtes un As. Merci pour votre disponibilité