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

Code:

---

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:

---

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;

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

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

@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 ;)

Code:

---

1 2 3 4 5 6 7

<input type="number" [(ngModel)]="targetRevenue" (ngModelChange)="calcul()" placeholder="Revenu Cible" value="{{prixMin}}" />

---

Code:

---

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:

---

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:

---

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:

---

<span>Le Prix Min sera de </span><span *ngIf="prixMin">{{prixMin | currency:'EUR'}}</span>

---

dukoid,

Merci. C'est vraiment intelligent d'avoir mis un seul appel pour 2 fonctions :)

Je n'y aurais pas pensé instinctivement :(

Oui, les calculs étaient juste pour m'amuser, j'avais encore rien mis dans la partie logique :)

Merci pour les astuces :)
C'est vrai que je dois jouer avec le DOM

Hello,

J'ai essayé les template driven (comme j'avais au départ) et les reactive form mais je m'y perds.

J'ai essayé de faire en sorte de boucler un tableau avec un ngFor mais je ne sais pas comment éviter de créer des valeurs bêtes "PrixJ1", "PrixJ2", ... "RecetteJ1", "RecetteJ2"...
Je voulais optimiser cela car si j'essaie sur 365 jours, ca va être long et stupide mais la logique de création me perd.
J'ai entendu parler de FormArray mais comme je comptais utiliser les slider qui ont l'air de fonctionner en template driven, je suis bloqué.

https://stackblitz.com/edit/angular-...p.component.ts

Angular, c'est fun mais compliqué :)

** astuce

il faut toujours regarder les messages d'erreurs dans la console de développement du navigateur
tu avais ce message d'erreur: No provider for FormBuilder!
ensuite, sur google, tu tapes: angular No provider for FormBuilder!
si tu as de la chances, tu tombes sur des infos pour cette erreur !

sur stackblitz faut cliquer sur la console en bas à droite pour le voir !

et donc :
** tu utilises les packages: reactiveForm et httpClient
donc il faut les importer dans ton module principal

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';   import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; // import { ReactiveFormsModule } from '@angular/forms'; // ici import { HttpClientModule } from '@angular/common/http'; // ici   @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule // ici ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ],   }) export class AppModule { }

---

** ReactiveFormsModule c'est pour utiliser la création de champs en utilisant le FormBuilder dans le controleur
** FormsModule c'est plutôt pour la vue

** pourquoi importer ?
Angular aurait pu mettre tous les packages mais pour réduire un max la taille de l'application, la solution est qu'on importe les packages que l'on a besoin

** il y a d'autres erreurs, je te laisse voir !

mais non, Angular ce n'est pas si difficile, en tout cas, pas plus qu'un autre
mais je t'accorde que l'apprentissage du dév. web demande pas mal de temps car il y a pas mal de technos, notions à connaitre... l'informatique évolue (trop) vite
mais la récompense est que tu as un métier créatif, bien payé avec des débouchés

haha, merci dukoid ;)

C'est clair que j'oublie les imports à chaque fois.
Je compte trop sur webstorm. Le jour où je l'aurais plus gratuitement, Visual Studio et sa ribambelle de facilitateurs me sauvera la vie je crois :)

Merci, j'ai corrigé mais là, j'ai dû planté un truc, je récupère des données JSON mais n'arrive pas à les lire.

Sur mon projet, ca fonctionne.

Ce qui me gêne surtout c'est de savoir comment créer ces variables à la chaine sans avoir à les créer "en dur".
Surtout que je voudrais essayer les calendriers et que ce soit la valeur de jours qui déterminent le nombre de lignes créées dans le tableau.

Je balbutie mais j'aime. C'est vrai que c'est intéressant surtout à 3h du mat

ça c'est un json:

Code:

---

1 2 3 4 5 6 7

{ "hotel": "Hilton", "date": "23-Sep", "occupancyRate": "61.5", "prixMax": "100" }

---

MAIS un tableau de json c'est:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

[ { "hotel": "Hilton", "date": "22-Sep", "occupancyRate": "61.5", "prixMax": "75" }, { "hotel": "Hilton", "date": "23-Sep", "occupancyRate": "61.5", "prixMax": "100" } ]

---

à 3h du mat c'est là ou on est le plus productif !

Arf,

oui 3h du mat c'est top mais ca laisse des séquelles lol. J'ai pas vu que ce n'était plus un tableau.

Faut que je cherche comment créer les variables à la chaine mais je sais pas si le template driven gère cela correctement ou si c'est le reactive form le plus adapté.
J'ai lu ca https://stackoverflow.com/questions/...bles-for-loops et des articles sur les FormArray mais étant trop novice, je sais pas quel chemin prendre et ma formation m'aide plus sur ces sujets :(

je ne comprends pas.
créer des variables à la chaine ?
dans quel but ?
le rapport avec les forms ?



je sais qu'on peut gérer des tableau de form
https://netbasal.com/angular-reactiv...y-3adbe6b0b61a

Code:

---

1 2 3 4 5 6

<div *ngFor="let skill of skills.controls;"> <ng-container [formGroup]="skill"> <input formControlName="level" /> <input formControlName="name" /> </ng-container> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10

skills = new FormArray([]);   addSkill() { const group = new FormGroup({ level: new FormControl(''), name: new FormControl('') });   this.skills.push(group); }

---

ou meme faire un mélange de champs et de groupe

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<form [formGroup]="user"> <input formControlName="name" />   <ng-container formArrayName="skills"> ... </ng-container> </form>   user = new FormGroup({ name: new FormControl(''), skills: new FormArray([]) });

---

Désolé, c'est encore nouveau pour moi Angular.
C'est juste que je regardais les différents "forms" (template/reactive) et que dans mon cas où je créé pour une période (année, mois) une ligne au tableau qui représente un jour différent avec ses propres valeurs (recette, prix minimum) et au lieu de faire dans le "component.ts", une déclaration entrée "en dur":
prixMin1: number / prixMin2: number /... jusqu'à la 365e itération et pareil pour les recette1 / recette2 /recette3...

C'est peut être pas clair mais comme je voyais les 2 façons de faire, j'hésitais à partir sur l'une ou l'autre piste.

Je te cache pas que le template driven a l'air plus facile pour ce que je veux faire :)

Après, je veux envoyer ces données du formulaire à une BDD

avec la méthode que je t'ai montré tu peux gérer cela car c'est dynamique.

dynamique dans le sens que tu construit un formulaire en fonction des données
à la différence d'un formulaire statique qui est fixe et donc qu'on ne peut modifier sa structure


n'hésite pas à faire tes ébauches sur stackblitz comme ça c'est plus facile pour nous pour voir


exemple:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

days = new FormArray([]);     constructor() { }   ngOnInit(): void {   for sur tes données json { const group = new FormGroup({ date: new FormControl(''), recette: new FormControl(''), prixmin: new FormControl('') });   group.get('recette').setValue(donnée json de recete); group.get('prixmin').setValue(donnée json de prix min); ...   this.days.push(group); }   }

---

C'est là où je m'y perds.
De ce que j'ai lu, ngModel c'est pour les template driven et les formGroup, formControl pour les reactive forms.
D'où mes recherches sur les FormArray.

J'ai l'impression de me noyer dans un verre d'eau :(

Mais merci en tout cas.
Oui, je vais aussi faire les modifs sur stackblitz :)

laisse tomber ngModel

ngModel c'est pour faire des trucs rapides

pour du sérieux, on utilise les forms reactives !

Citation:

---

Envoyé par krakatoa

ngModel c'est pour faire des trucs rapides

---

C'est ca qui est perturbant, ngModel, j'en ai besoin pour déclencher des écoutes avec le ngModelChange.
J'ai lu aussi l'histoire d'immuabilité et de muabilité qui me désarçonne aussi.

Je vois pas si je peux mélanger ngModel dans des reactiveforms qui a l'air d'être plébiscité par tous car j'ai aussi envie de tester le ngModelChange et d'utiliser le slider qui est lié au champs d'occupation aussi (et ces 2 éléments nécessitent d'avoir un ngModel de ce que j'ai compris)

c'est parceque il faut potasser un max toutes les possibilités qu'offre Angular
sache qu'on peut écouter un formulaire et réagir comme on veut lorsqu'il y a une modification

** on écoute un champs

Code:

---

1 2 3 4 5 6 7 8

ngOnInit(): void { this.registerForm.controls['lastName'].valueChanges.subscribe((lastName: string) => { // pour un exemple, si le champs: lastName est modifié console.log(lastName); // on affiche dans la console la valeur du champs // // traitement // });

---

** on écoute le formulaire entier

Code:

---

1 2 3 4 5 6 7 8

ngOnInit(): void { this.registerForm.valueChanges.subscribe((formValues: any) => { // si le formulaire est modifié (quelque soit le champs) lors d'une saisie console.log(formValues); // on affiche dans la console le formulaire entier // // traitement // });

---

Hello dukoid,

Un peu de temps hors Angular m'a fait du bien mais en même temps, m'y remettre a été dur lol.

J'ai essayé depuis hier, ce que vous disiez et je suis sur les reactive Form.

J'ai remis sur le même lien: https://stackblitz.com/edit/angular-...component.html

Et aussi, là, dans mon formulaire, j'avais dans le tableau ces données qui venaient bien de mon json et qui fonctionnait en template driven form

Code:

---

<span *ngIf="revenue">{{Revenue | currency:'EUR'}}</span>

---

J'ai essayé aussi de jouer avec le mat-slider en reactive form mais faut que je le reprenne, il fonctionne pas en reactive form.

Edit: J'ai du mal fermer mon Form mais je comprends plus trop à cette heure ci.
J'ouvre le form avant de boucler les <tr> ce qui me parait normal et le ferme juste après pour éviter d'instancier ce form un nombre de fois illogique.
Je l'ouvre ici car j'avais observé que si je l'ouvrais avant même de créer mon tableau, certains éléments comme le slider ne fonctionnait plus.

Va falloir que je me couche car là, je vois double et trouble :)

(1) si tu ouvres des balises, il faut les fermer
regarde bien 2 balises div sont ouvertes mais pas fermées


(2)
relance la commande d'installation

ng add @angular/material


(3) il ya d'autres erreurs que tu pourras corriger

Yes, je viens de les voir. Merci :)

Du coup, j'ai réinstallé material et ai reessayé de faire le form comme il faut mais je me suis perdu niveau logique là.
Est ce que je peux te demander ton aide, s'il te plait?

En gros, je veux que ce tableau créé une ligne autant de fois que l'utilisateur veut. Ici, j'ai mis 2 jours mais dans l'idéal ca serait 1 mois pour qu'il voit ses tarifs sur le mois.
J'ai donc mis les formgroup au sein du tableau entre la création de tr et de td car mon slider ne marchait plus lorsqu'il était "inclus" dans le formulaire. Il faut que je le laisse hors du form mais par contre, le champs du taux d'occupation lui pour être pris en compte par le formulaire est nécessaire.

En dessous du tableau, j'ai des données qui seront communes à toutes les lignes du tableau: le nombre total de chambres.

Est ce que je me suis embrouillé sur le sujet? En tout cas, merci pour les précédentes indications

dans mon message du 14/10 je t'ai donné un exemple de formArray
tu as fait différemment


la 1ere chose à faire est de bien écrire le FormArray
re écris le code avec mes indications !

ensuite tu affiche dans la console le FormArray
tu regardes qu'il est bien formé !

je regarderai si t'es bloqué....

Effectivement, ca n'était pas la même méthode. J'avais suivi un tuto sur internet qui employait le formbuilder.

Arf, ca m'apprendra à lire de travers et de penser que "ce n'est pas grave" si ce n'est pas exact à 100%.

J'ai corrigé sur https://stackblitz.com/edit/angular-...m.component.ts

Par contre, je me suis perdu sur l'usage là du *ngFor :

Code:

---

1 2 3 4 5 6

<div *ngFor="let skill of skills.controls;"> <ng-container [formGroup]="skill"> <input formControlName="level" /> <input formControlName="name" /> </ng-container> </div>

---

Ce que j'ai fait ne convient pas? J'indique un tableau sur lequel boucler.

Aussi, juste pour ceux qui auraient le même souci, dans mon essai de cette nuit sur les FormArray, j'ai vu que les controls ne passaient pas, j'avais remplacé les ".controls" par des ['controls'] comme le suggèrait https://www.codegrepper.com/code-exa...ractControl%27.

Les tests des tutos fonctionnaient après cela

Code:

---

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

revenueManagerForm: FormGroup; days = new FormArray([]);   constructor(private http: HttpClient) {}   ngOnInit(): void {   this.http.get('assets/data.json').subscribe((products: any) => { // ON FAIT LE TRAITEMENT DANS LE SUBSCRIBE console.log(products); // this.revenueManagerForm = new FormGroup({ days: new FormArray([]) });   //   for (let day = 0; day < 3; day++) { const group = new FormGroup({ date: new FormControl('') /*   revenue: new FormControl(""),   coefficientPonderation: new FormControl(""),   types: new FormControl(""),   occupancyRate: new FormControl(""),   prixMax: new FormControl(""),   prixMin: new FormControl(""),   nbOfRooms: new FormControl("")   */ }); this.days.push(group); }     for (const product of products) { for (let day = 0; day < 3; day++) { // this.days.controls[day].get('date').setValue(product.date); // //group.get("date").setValue(product.date); //group.get("occupancyRate").setValue(product.occupancyRate); } } console.log(this.days);     this.days.controls.forEach((item, idx) => { this.revenueManagerForm.setControl(idx.toString(), item) }); console.log(this.revenueManagerForm);     this.revenueManagerForm.valueChanges.subscribe((values: any) => { console.log(values); }); });

---

Code:

---

1 2 3 4 5 6 7

<div *ngFor="let day of days.controls;"> <ng-container [formGroup]="day"> <input formControlName="date" /> ... ... </ng-container> </div>

---

à toi de completer le reste