IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Calcul avec saisies utilisateur Angular ReactivForm multi step


Sujet :

Angular

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    71
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2005
    Messages : 71
    Par défaut Calcul avec saisies utilisateur Angular ReactivForm multi step
    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

  2. #2
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Par défaut
    qu'affiche le console log ?
    il y a bien les données des 3 formulaires ?

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    71
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2005
    Messages : 71
    Par défaut
    Bonjour Krakatoa

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

  4. #4
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Par défaut
    justement si tu me donne ce qu'il te retourne je pourrais te dire comment faire

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    71
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2005
    Messages : 71
    Par défaut
    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)
          })

  6. #6
    Membre extrêmement actif
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Par défaut
    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 ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 12/02/2008, 20h05
  2. Réponses: 10
    Dernier message: 26/10/2007, 13h55
  3. [FPDF] Générer un PDF avec saisie utilisateur
    Par Overkill06 dans le forum Bibliothèques et frameworks
    Réponses: 5
    Dernier message: 26/09/2007, 19h42
  4. Saisie de calcul par l'utilisateur
    Par zenaf dans le forum C
    Réponses: 11
    Dernier message: 26/10/2006, 19h42
  5. Reqête avec saisie utilisateur
    Par goutbouyo dans le forum Access
    Réponses: 10
    Dernier message: 07/12/2005, 16h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo