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 :

Ecouter 2 champs pour calcul


Sujet :

Angular

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2019
    Messages : 16
    Par défaut Ecouter 2 champs pour calcul
    Hello,

    Je débute sur Angular et je galère sur les Change.

    J'essaie de faire un calcul tout bête.

    Calculer une recette en fonction de 2 inputs (number et price) mais j'ai dû me planter sur la concaténation en js car j'ai un message d'erreur:
    https://stackblitz.com/edit/angular-...p.component.ts

    Dans un 2nd temps, j'essaierai de ne pas rendre ce calcul visible par l'internaute. Faudra t'til que je fasse une fonction?

    J'ai regardé, là, je n'utilise pas les Reactive Form mais cela changera til quelque chose si je le fais?
    Merci

  2. #2
    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 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
    <div>
      <input
        type="number"
        [(ngModel)]="price"
        (ngModelChange)="calcul()"
        placeholder="price" />
      <input
        type="number"
        [(ngModel)]="nb"
        (ngModelChange)="calcul()"
        placeholder="Nb de chambres" />
    </div>
     
    resultat = {{resultat}}
    </div>
     
    resultat = {{resultat}}

    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
     
    import { Component, OnInit, VERSION } from '@angular/core';
     
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      price = 0;
      nb = 0;
      resultat = 0;
     
      constructor() {}
     
      ngOnInit() {
      }
     
      calcul() {
        this.resultat = this.price * this.nb;
      }
    }

    ** [(ngModel)]="price"
    on utilise le two way data binding

    c.a.d que ça met à jour de la balise <input vers la variable du composant
    et le 2eme sens: de la variable du composant vers <input

    à savoir: ngModel est utilisable uniquement avec les balises ayant une propriété: value car ngModel fait le lien avec la propriété: value d'une balise.

    ** (ngModelChange)="calcul()"

    du fait qu'on utilise ngModel, bien plus pratique et efficace d'utiliser: ngModelChange qui a chaque changement de la valeur lance le calcul
    alors qu'avec (change) le calcul se fait que quand on quitte l'input

    ** calcul()

    toujours faire les calculs dans le controleur (pas dans la vue)
    sinon tu va te retrouver avec une vue illisible !


    ** utiliser les form ?

    on utilise les formulaires quand on a besoin de la validation ou pour gérer facilement les données pour des grands formulaires

    ** number: number = 0;

    éviter de nommer une variable avec un mot clé.. number est un mot clé !

    ** nb: number = 0;

    il est inutile de préciser le type, typescript fait tout pour qu'on est moins de code à écrire
    si tu écris:
    nb = 0;

    comme tu as mis un nombre: 0, typescript va déduire automatiquement que nb est du type number
    donc pas besoin de le préciser..

    par contre si tu ne précise pas de valeur, là faut mettre le type:
    nb: number;

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2019
    Messages : 16
    Par défaut
    Hello @dukoid,

    merci. Désolé, je n'ai pas répondu depuis hier.
    Je tentais ce que tu m'as présenté et essayais d'ajouter une surcouche: avoir 2 ngModelchange sur un même input mais cela a l'air de planter.
    En gros, je voulais faire une recommandation d'un prix max en fonction de critères hoteliers: taux d'occupation et la recette , le "résultat" et lorsque je mets résultat dans un input, les 2 fonctions se lancent à la suite et fausse mes calculs (le calcul de recette n'est pas bon en soit mais je voulais tester un truc dans un contexte plus élevé.

    Cela donne sur stackblitz:
    https://angular-ivy-l4zxkq.stackblitz.io

    Oui, je veux faire un formulaire pour que ces données partent en base. J'ai déjà travaillé avec Symfony mais en regardant les API, j'ai vu beaucoup d'interactions Symfony/Angular et ai voulu voir et là l'idée serait d'envoyer mes valeurs sur firebase.

    Angular a l'air intéressant mais très difficile à prendre en main.
    Mais comme c'est beaucoup demandé en entreprise, autant apprendre

  4. #4
    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
    le lien stackblitz est juste l'application qui tourne
    je n'ai pas accès à l'éditeur de code

    désolé, je n'ai pas trop compris ce que tu veux faire, peux tu re expliquer stp

    en effet, on ne met pas 2 ngModel sur un input (vu qu'un input n'a qu'un seul champs de saisie)
    doit avoir un moyen , je te dirais ça quand j'aurai accès à l'éditeur...


    tu peux très bien envoyé des données depuis un projet angular vers un service Symfony ou vers firebase
    mais firebase est très particulier, c'est du noSql. c'est une base de donnée sans relation


    en effet, le coté dynamique d'angular est passionnant. ça vaut le coup de l'apprendre, c'est assez demandé sur le marché.
    et oui, comme tout framework ça demande du travail, du temps pour apprendre.

    il y a de nombreux tutoriels textes ou meme vidéos.... à partir d'angular 7 c'est bon...

  5. #5
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2019
    Messages : 16
    Par défaut
    @dukoid,

    merci.

    Désolé, je n'avais pas testé mon lien. Je pensais que l'accès aux modifications était possible.

    https://stackblitz.com/edit/angular-...src/index.html

    D'accord, on ne peut pas mettre 2 ngModelChange sur un input, j'avais essayé

    Je devrais changer par un "onChange"?

    Par contre, ce qui m'inquiète est que je dois modifier le champs revenu pour avoir accès au prix minimum.

    Dans mon exemple, je voulais calculer la rentabilité d'un hotel donc sa recette cible journalière et je l'ai mais lorsque je veux calculer le prix minimum à laquelle il doit louer ses chambres, je dois modifier le revenu (pas forcément corriger mais juste faire effacer avec la flèche retour) j'ai du coup le prix minimum mais maintenant le mauvais revenu.

    Ce qui est embêtant si je décide d'envoyer ce calcul en base

    Oui, firebase, c'est parce qu'on m'en a parlé mais je vais essayer de faire communiquer ce projet avec ma BDD MySQL (univers que je connais plus).

    Justement, là, j'ai essayé une formation sur internet mais trop vide à mon goût.
    J'ai l'impression d'être largué sur TypeScript et le POO JS. Ca semble plus compliqué que le POO PHP (après, je suis assez novice en JS POO). Merci en tout cas

  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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
        <input
          type="number"
          [(ngModel)]="targetRevenue"
          (ngModelChange)="calcul()"
          placeholder="Revenu Cible"
          value="{{prixMin}}"
        />

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    calcul() {
       this.calculRecette(); 
       this.calculPrixMin()
    }
    ** (1)
    il y a une confusion sur: targetRevenue
    il est utilisé pour le ngModel et pour recevoir le resultat de la recette

    ** (2)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
           this.targetRevenue= this.prixMax * this.nbOfRooms * (this.occupancyRate / 100);
           this.prixMin = this.recette / this.nbOfRooms;
    si dans un calcul tu multiplie par nbOfRooms et qu'ensuite tu divises par: nbOfRooms
    ça ne sert à rien !

    ** (3)

    utilise cette fonction avant chaque calcul car ça ne sert à rien de faire un calcul si les valeurs ne sont pas bonnes

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
      checkValues() {
        if (this.targetRevenue >= 0 && this.nbOfRooms >= 0 && this.occupancyRate >= 0 && this.prixMax >= 0) {
          return true;
        }
        return;
      }
    ** 4
    astuce:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span>Le Prix Min sera de </span><span *ngIf="prixMin">{{prixMin | currency:'EUR'}}</span>

Discussions similaires

  1. Réponses: 6
    Dernier message: 11/08/2010, 15h50
  2. [AC-2003] fonction pour calcul de champs
    Par anelinette dans le forum VBA Access
    Réponses: 0
    Dernier message: 15/06/2010, 09h04
  3. [AC-2003] Bloqué pour calculer la somme d'un champ entre 2 date
    Par bastien3117 dans le forum Requêtes et SQL.
    Réponses: 3
    Dernier message: 24/08/2009, 13h08
  4. [DEBUTANT] Probelme pour calculer 2 champs dans un etat
    Par The_freeman dans le forum Access
    Réponses: 1
    Dernier message: 18/06/2006, 18h12
  5. Récupérer le contenu d'un champs pour un calcul ?
    Par dark_vidor dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/01/2006, 10h25

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