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 ?

Calcul avec saisies utilisateur Angular ReactivForm multi step

Angular

Vue hybride

Discussions similaires

Partager

Partager