Calcul avec saisies utilisateur Angular ReactivForm multi step

**ricobye** · 14/07/2020, 11h54

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 HTML :

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
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 :

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
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 :

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
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 :

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
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

**krakatoa** · 14/07/2020, 12h18

qu'affiche le console log ?
il y a bien les données des 3 formulaires ?

**ricobye** · 14/07/2020, 16h21

Bonjour Krakatoa

La console log affiche bien toutes les saisies. Mais impossible de les capter pour faire les calculs

**krakatoa** · 14/07/2020, 18h05

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

**ricobye** · 14/07/2020, 21h43

Ce code ne marche pas.

Code :

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

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 :

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

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)
      })

**dukoid** · 15/07/2020, 08h46

Code :

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

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 ?

**ricobye** · 15/07/2020, 11h01

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

Merci

**dukoid** · 15/07/2020, 11h17

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

**ricobye** · 15/07/2020, 17h55

Ok dukoid, je reprends tout:

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

Code html :

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
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 :

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
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 :

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
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 :

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
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 :

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
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

**dukoid** · 15/07/2020, 19h58

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 :

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

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 :

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
 
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 :

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

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

**ricobye** · 15/07/2020, 22h58

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é

Calcul avec saisies utilisateur Angular ReactivForm multi step

Angular

Discussions similaires

Partager

Partager