Discussion :

[Olivier_Bounty]

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

[dukoid]

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;

[Olivier_Bounty]

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

[dukoid]

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

[Olivier_Bounty]

@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

[dukoid]

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>